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元素。

Answer 2

使用

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

请参阅http://api.jquery.com/on/，Handling Events和Understanding Event Delegation

.click on li追加后不工作

2 个答案: