javascript - .点击 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

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

尝试...

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

这将允许您的代码在文档级别监视事件，无论发生什么变化。

更新:

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