jQuery的.on()函数是什么？

Question

我有两行jQuery代码。第一行添加了一个事件到“myLink”上，第二行在“#another”上添加了一个“myLink”的类，但是第二个没有起作用，但是当我使用.live方法时它可以工作。jQuery在1.7版本中引入了.on方法。我想用.in函数来实现这个，这可能吗。

$(function(){

    $("a.myLink").on('click', function() { alert( 'Click!' ); } );

    $("a#another").addClass( "myLink" );
})



<a class="myLink">A link!</a>
<a id="another">Another link!</a>

- Jitender

---

在使用 on 之前，先学习一下 事件委托，然后阅读文档。这是一项通常需要了解的重要技术。 - user1106925

Answer 1

我刚写了一篇关于如何使用.on()代替.live()的入门文章，并解释了.on()的静态形式（您正在使用）和动态形式（您需要使用）。 早些时候的这篇入门文章在这里：Does jQuery.on() work for elements that are added after the event handler is created?，其中包含更多细节。

您需要使用以下内容：

$(document).on('click', "a.myLink" function() { alert( 'Click!' ); } );

或者，更好的方法是使用动态链接的静态祖先元素，而不是document（我在这里假设它是一个对象#container，因为这样会提高性能，如下所示：

$("#container").on('click', "a.myLink" function() { alert( 'Click!' ); } );

- jfriend00

Answer 2

改成这个 -

$("a.myLink").on('click', function() { alert( 'Click!' ); } );

翻译成中文为：

$(document).on('click', 'a.myLink', function(){ alert( 'Click!' ); } );

- MD Sayem Ahmed

Answer 3

尝试一下

$(document).on('click', 'a.mylink', function() { alert( '点击！' ); } );

- LeeR

---

在文档树的顶部附加许多委托事件处理程序可能会降低性能。为了获得最佳性能，请在尽可能靠近目标元素的文档位置附加委托事件。(http://api.jquery.com/on/) - Alex

Answer 4

你的提示是它与live方法一起使用。这是因为在设置事件后，你将类添加到'#another'。所以你要么使用live方法，要么改变顺序，先将类添加到'another'。

- Mark Fraser