Javascript 。在附加后单击“li不工作”

我将li附加到ul，例如：

$(".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));

使用

---

请参阅和

问题通常是动态添加。。。当click事件设置为monitor时，它不存在

试试看

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

这将允许您的代码在文档级别监视事件，而不管发生什么更改

更新：

---

这个概念是监控上面的元素将添加到哪里，我不知道您的代码，所以不能保证您可以附加到其他元素。根据代码的复杂性，使用

$（文档）可能会导致性能问题。。。请尝试
$（“body”）
或更低的HTML元素。
不要在上使用文档，请阅读此处
http://api.jquery.com/on/
事件性能
部分确定。。。我会给你一个关于性能的可能，但是概念是监控上面的元素将添加到哪里，我不知道他的代码，所以不能保证其他元素。
$(".vocab-list").on('click', '.vocab-word', function() { 
alert( "Handler for .click() called." ); 
);

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