javascript - 具有相同类别的多个按钮不起作用

Question

我从单词列表中创建了具有相同类的多个按钮。

var words = $(this).val().split(' ');
    $.each(words, function(i, v) {
         if ($.trim(v) !== '') {
            html += "<button class='wordbtn'>"+ v +"</button>" + " "
         }
    });

$("p").html(html);

这些按钮显示在我的 View 中，但是当我单击该按钮时，该按钮不起作用。

$(".wordbtn").click(function(){
    console.log('clicked')
})

当我检查代码时，会显示按钮，但当我查看源代码时，按钮不会显示。如果我插入一个预按钮来测试，它会起作用。

<p><button class='wordbtn'>Test</button><p>

Answer 1

我认为问题是当您运行代码时，wordbtn按钮仍然不存在

$(".wordbtn").click(function(){
    console.log('clicked')
})

因此点击事件不会分配给页面中的任何元素。

尝试将按钮的点击事件替换为:

$(document).on("click", ".wordbtn", function(event){
    console.log('clicked');
});

现在，即使使用新添加的按钮，单击事件也会触发，这是因为该事件是由当前文档元素在冒泡后处理的。