jQuery 1.7 动态元素的 on() 和 off() 方法答案

【问题标题】：jQuery 1.7 on() and off() methods for dynamic elementsjQuery 1.7 动态元素的 on() 和 off() 方法
【发布时间】：2011-11-06 19:06:29
【问题描述】：

jQuery 1.7 的 .on() 和 .off() 方法应该替换 .live() 等。

我用动态项目试了一下：

 $(".myList").on('click', function(e){
  alert('hello world');
 });

这不适用于加载 DOM 后添加的元素。

上面的代码是 jQuery 1.7 的 .on() 和 .off() 方法的有效示例吗？

【问题讨论】：

标签： jquery jquery-1.7

【解决方案1】：

有关 live() -> on/off()（和其他）示例，请参见 http://blog.jquery.com/2011/11/03/jquery-1-7-released/。

这是他们将 live 转换为 on 的示例：

$('a').live('click', fn);
$(document).on('click', 'a', fn);

所以你的例子变成了：

$(document).on('click', '.myList', function(e){
  alert('hello world');
});

【讨论】：

有些事情要实现。 on() 不适用于附加到主体并且具有负 z-index 的动态创建的元素。无论出于何种原因，单击都不会越过包含正文的元素。身体标签将继续捕捉所有点击。即使您使 body 的 z-index 低于添加到 DOM 的元素。但是即使 on() 不能，live() 也有能力定位这些负索引项。
@Alex 为什么需要动态创建具有负 z-index 的元素？
最重要的是从 jQuery 版本 1.9.0 开始 - live() 方法不再可用。

【解决方案2】：

这是一个小例子：

http://jsfiddle.net/zzSjK/

<script type="text/javascript">
    $(function(){
        $(document).on('click','.clickme' , function(e){
          addtext()
        });
        function addtext() {
            $('.myList').append('<div class="clickme">click me</div>')
        }
    })
</script>

<div class="myList">
    <div class="clickme">-click-</div>
</div>

【讨论】：

【解决方案3】：

“绑定”与：

$(document).on('click','.myDiv',function(){ ... });

然后“解除绑定”：

$(document).off('click','.myDiv');

【讨论】：