jQuery点击处理函数不会触发DOM加载后添加的元素

我相信我可以用.live做到这一点，但该方法已被弃用。 这是问题所在：

我有一个点击处理函数，应该触发任何具有类“myClickEl”的元素。 这适用于加载时文档中存在的“myClickEl”元素。 但是，如果我在加载DOM后添加myClickEl元素，则不会触发单击处理程序。

这是代码。 我试过以下两种方法：

选项1：

jQuery('.myClickEl').on('click', function(){ var formText='This is some text to paste'; jQuery(this).parent().next('textarea').val(''); jQuery(this).parent().next('textarea').val(formText); }); 

选项2：

  jQuery('.myClickEl').click(function(){ var formText='This is some text to paste'; jQuery(this).parent().next('textarea').val(''); jQuery(this).parent().next('textarea').val(formText); }); 

Answer 1

您需要使用事件委派

 jQuery(document).on('click','.myClickEl', function() { var formText='This is some text to paste'; jQuery(this).parent().next('textarea').val(''); jQuery(this).parent().next('textarea').val(formText); }); 

Answer 2

来自http://api.jquery.com/on/

您对on的用法感兴趣：

 .on( events [, selector ] [, data ], handler(eventObject) ) 

JQuery给出的示例是

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

你应该做类似的事情，首先选择一个在页面上是静态的元素，然后选择应该使用click事件的选择器。

最佳实践是尽可能具体，因此尝试选择合理的第一个目标，以便JS不必检查每个单击事件以查看它是否应该运行。