无法获取jQuery on（）来注册动态添加的内容

我对jQuery中的on（）方法很陌生，但现在是我需要使用它的时候了。

我有两个function点击特定按钮。 每个函数都适用于页面上最初的任何元素，但不适用于任何动态添加的内容（更多相同的按钮）。 我知道我需要在这里和谷歌上阅读其他答案之后使用on（）函数，但我仍然遇到麻烦。 无论如何，代码：

jQuery("ul#THEBUTTONS").on({ click: function(event){ event.preventDefault(); console.log("apaz clicked"); } }, "a.azaz"); jQuery("ul#THEBUTTONS").on({ click: function(event){ event.preventDefault(); console.log("mapaz clicked"); } }, "a.mapaz"); 

任何帮助都会非常感激，在这里撕扯我的头发。

Answer 1

.on()基本上有两种风格：一种类似于.bind() ，另一种类似于.delegate() 。

对于您的问题，您希望使用delegate版本。 作为参考，签名是这样的：

 // bind $(element-selector).on(event, handler) // delegate $(container-selector).on(event, element-selector, handler) 

最快速的方法是阅读delegate ，它是什么，如何使用它，然后应用它。

Answer 2

有两种方法可以使用.on() ，而你使用的是错误的类型。

您可以使用$('selector for elements you want the event handler bound to').on('event', function() {...});将事件处理程序直接绑定到元素$('selector for elements you want the event handler bound to').on('event', function() {...});

或者，您可以通过在包含所有动态添加元素的包装元素上调用.on()来委托事件，例如div，或者在最坏的情况下，包含元素。 代码看起来像这样：

 
 Test link 
 $('#wrapper').on('click', '.link', function(e) { // code to handle the click event on the link here }); 

一旦事件冒泡到它，事件处理程序实际上由

元素处理，但只有在原始目标与提供的选择器匹配时才调用该函数。 使用此方法，您可以使用类link动态添加其他元素到div，并且该函数也会在单击时运行。