同事在复制bootstrap中的select控件之后,发现用$('.selectpicker').selectpicker();刷新下拉框控件不好使,后来发现是用原生js克隆的方法obj.cloneNode();
复制出来的元素全部都不能绑定上JQ的事件按,所以要用jquery自带的克隆方法去克隆元素,才能绑定JQ的事件,这应该是IE8和Jquery的一个兼容的BUG吧
结论:IE8以下jquery的on事件失效,有可能是使用了原生js,可以换jquery的事件来试试。
IE8以下失效例子如下:
有如下html结构:
1
2
3
|
<
ul
id
=
'ul'
>
<
li
class
=
'li'
></
li
>
</
ul
>
|
用jQuery 为ul下面的所有li绑定click事件。
1
2
3
4
|
$(
'#ul'
).on(
'click'
,
'li'
,
function
(){
//do stuff
alert(
'I am clicked!'
);
});
|
假如要使ul中增加一个li,那么可以使用原生js这样子做。
1
2
3
4
|
var
ul = document.getElementById(
'ul'
);
var
li = document.getElementsByClass(
'li'
);
var
newLi = li[0].cloneNode(
true
);
ul.appendChild(newLi);
|
但是点击生成的li元素,不会触发alert。
这时使用jquery的插入方法却可以,代码如下。
1
2
3
|
var
$li = $(
'.li'
);
var
$newLi = $li.clone();
$(
'#ul'
).append($newLi);
|