jquery on事件在IE8下失效的一种情况,及解决方法/bootstrap空间绑定控件事件不好用

同事在复制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);
原文地址:https://www.cnblogs.com/ZenoLiang/p/7565151.html