jQuery是否为未来事件工作？

Question

在过去，如果内容是通过AJAX重新加载的，我们过去常常使用jQuery的.live() (http://api.jquery.com/live/)绑定到未来的事件。

由于.live()现在被废弃(并删除)，jQuery建议使用.on() ( http://api.jquery.com/on/)代替。他们并没有说它适用于未来的事件。顺便提一句，没有处理通过AJAX重新加载的元素。

我的问题是：.on()是否工作，还是应该以.live()过去的方式处理未来的事件？

我打电话给.on()的方式如下：

$j('#header-cart').on('click', '.skip-link-close', function(e) {
    ... // change the world
});

谢谢。

Answer 1

是的，它以一种非常类似的方式工作，它的区别在于，您不将事件绑定到未来的元素，而是绑定到基础的静态元素。.on利用事件传播/冒泡。

作为一个例子

<div class="static-element">
    <div>
        <!-- Content inserted from ajax call below -->
        <p class="volatile-element">Example content</p>
    </div>
</div>

使用.on绑定到静态元素并将易失性元素作为目标。

$(".static-element").on("click", ".volatile-element", function(event) { ... });

Answer 2

当用.on()替换时，您需要以不同的方式附加事件.live()

活的

$('#ele_id').live('click', function() { 
  // event code
});

关于：

$(document).on('click', '#ele_id', function() { 
  //  event code
});

Answer 3

我觉得你用错误的方式呼叫$.on！是的，它是.live()的替代品，这太棒了。

有一个静态元素：#static-div和动态内容，比如.dynamic-link，在<div>中。您需要这样调用.on()：

$("#static-div").on("click", ".dynamic-link", function(e){
   e.preventDefault();
});

或者，如果你一点也不确定，你可以这样做：

$(document).on("click", ".dynamic-link", function(e){
   e.preventDefault();
});