Question

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

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

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

按钮显示在我的视图中，但是当我单击按钮时不起作用。

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

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

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

Answer 1

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

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

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

尝试使用以下选项替换按钮的click事件：

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

现在即使使用新添加的按钮，也会触发click事件，这是因为事件是在当前文档元素冒泡到那里之后处理的。

Answer 2

我假设您正在运行此代码：

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

在之前

，你正在创建按钮。

这不起作用，因为这些按钮不存在，因此您无法向其添加事件。

使用名为＆＃39;事件委托的内容＆＃39;你可以得到你想要的效果。

https://learn.jquery.com/events/event-delegation/

Answer 3

添加事件侦听器后，所有事件都不会侦听生成的元素。请参阅以下示例，其中包含 JQuery 和纯 JavaScript

使用e.target

尝试纯Javascript docuemnt.event

document.getElementById("input").addEventListener("keyup", function() {
  var words = this.value.replace(/\s+/g, " ").trim().split(" ");
  var html = "";
  for (var i = 0; i < words.length; i++) {
    html += "<button class='wordbtn'>" + words[i] + "</button>" + " ";
  }

  document.getElementById("p").innerHTML = html;
});
// add click event to DOM
window.onclick = function(e) {
  //detect if mouse clicked on element has class "wordbtn"
  if (e.target.className.indexOf("wordbtn") > -1) {
    console.log('clicked')
  }

}

<input id='input' />
<p id='p'></p>

JQuery $(document).on(event,target,callbak);

var str = "some words from user inputs";

$("#input").keyup(function() {
  var words = $.trim($(this).val().replace(/\s+/g, " ")).split(' ');
  var html = "";
  $.each(words, function(i, v) {
    html += "<button class='wordbtn'>" + v + "</button>" + " "
  });

  $("p").html(html);

});

$(document).on("click", ".wordbtn", function() {
  console.log('clicked')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input' />
<p></p>

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

3 个答案: