.click on li追加后不工作

Question

我将一个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));

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

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

Answer 1

问题通常是动态添加...当click事件设置为监视时,它不存在.

试试......

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

这将允许您的代码在文档级别监视事件,无论更改如何.

更新:

这个概念是监视上面添加元素的位置,我不知道你的代码,所以不能保证你可以附加的其他元素.根据代码的复杂性,使用代码可能会导致性能问题$(document).on()...尝试$("body")或降低HTML元素.