jQuery:如何用 .on 替换 .live?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10604328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 09:35:14  来源:igfitidea点击:

jQuery: how to replace .live with .on?

jquery

提问by CarpeTempus_

Possible Duplicate:
jQuery 1.7 - Turning live() into on()

可能的重复:
jQuery 1.7 - 将 live() 转换为 on()

According to the jQuery API (http://api.jquery.com/on/) the function 'live' is deprecated, it is recommended to use 'on' instead. But when I replace 'live' with 'on' in my code, jQuery can't find later added elements anymore:

根据 jQuery API ( http://api.jquery.com/on/) 不推荐使用函数“live”,建议使用“on”代替。但是当我在我的代码中用 'on' 替换 'live' 时,jQuery 再也找不到后来添加的元素了:

This works (but is deprecated):

这有效(但已弃用):

$('li.bibeintrag').live('click', function(){
alert('myattribute =' + $(this).attr('myattribute'));
});

This is an example from the API for 'on':

这是“on”的 API 示例:

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

When I change my code to this ('live' replaced with 'on') it does not work anymore (jQuery will not find later added elements (e.g. with append)):

当我将我的代码更改为此('live' 替换为 'on')时,它不再起作用(jQuery 不会找到后来添加的元素(例如使用 append)):

$('li.bibeintrag').on('click', function(){
alert('myattribute =' + $(this).attr('myattribute'));
});

What am I doing wrong? Can someone help, please?

我究竟做错了什么?有人可以帮忙吗?

回答by VisioN

You should add event to any parent element of li.bibeintrag.

您应该将事件添加到 的任何父元素li.bibeintrag

$('ul').on('click', "li.bibeintrag", function(){
    alert('myattribute =' + $(this).attr('myattribute'));
});

回答by Sampson

jQuery's live, when viewed through the $.onstyle would have looked like this:

当通过$.on样式查看时,jQuery 的 live将如下所示:

$(document).on("click", "li.bibeintrag", function(){

});

It would listen to click events at the documentlevel, and determine whether their target matched the second parameter of $.on. You and I are encouraged to do this our selves, but rather than listening at the document level, we want to listen much closer to the element itself (so the event doesn't need to propagate too far before it's handled).

它将侦听该document级别的点击事件,并确定其目标是否与 的第二个参数匹配$.on。我们鼓励您和我自己这样做,但与其在文档级别进行监听,我们更希望在更接近元素本身的位置进行监听(因此事件在处理之前不需要传播太远)。

Since you're responding to clicks on an li, listen at the level of that items parent:

由于您正在响应对 的点击li,请在该项目的父级级别进行聆听:

$("ul#myList").on("click", "li.bibeintrag", function(){
  /* Respond */
});

Keep in mind that without providing the second parameter of $.on, the event handler is bound to the element itself, meaning you don't get the behavior of $.livewhich would react to dynamically added elements.

请记住,如果不提供 的第二个参数$.on,事件处理程序将绑定到元素本身,这意味着您无法获得$.live对动态添加的元素做出反应的行为。

回答by Shyju

This should work

这应该工作

$('ul').on('click','li.bibeintrag' function(){
  alert('myattribute =' + $(this).attr('myattribute'));
});