.click on li 附加后不起作用[重复]答案

【问题标题】：.click on li not working after appending [duplicate].click on li 附加后不起作用[重复]
【发布时间】：2014-12-22 00:30:04
【问题描述】：

我在 ul 后面加上一个 li，例如：

$(".vocab-list").append( $('<li onclick="play_sound(\''+val['audioURL']+'\');" class="vocab-word" id="vocab_' + val['id']+ '"><img width="230px" height="230px" src="' + val['imageURL'] + '" /><div><i class="fa fa-play-circle"></i>' + val['word'] + '</div></li>').hide().fadeIn(600));

现在我正在尝试做一些 onclick 所以使用以下但它不起作用

$( ".vocab-word" ).click(function() {
  alert( "Handler for .click() called." );
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

问题通常是动态添加......当点击事件设置为监控时它不存在。

试试...

$(document).on("click", ".vocab-word", function() {
  alert( "Handler for .click() called." );
});

这将允许您的代码在文档级别监控事件，而不管发生了什么变化。

更新：

这个概念是监控上面的元素将被添加到哪里，我不知道你的代码，所以不能保证你可以附加其他元素。使用$(document).on() 代码可能会导致性能问题，具体取决于代码的复杂性...尝试$("body") 或更低的HTML 元素。

【讨论】：

请勿使用文档，请阅读此处http://api.jquery.com/on/Event performance部分
OK ...我会给你一个关于性能的可能，但这个概念是监视上面将添加元素的位置，我不知道他的代码，所以不能保证其他元素.

【解决方案2】：

使用

$(".vocab-list").on('click', '.vocab-word', function() { 
alert( "Handler for .click() called." ); 
);

见http://api.jquery.com/on/、Handling Events和Understanding Event Delegation

【讨论】：