Question

在我的HTML上，我有按钮列表和文本输入字段。输入字段是在我的按钮列表中添加额外的按钮。

在jQuery上，当单击带有.choices的这些按钮之一时，我具有eventListener控制台记录其值。

工作正常，没有任何错误。但是，当我在具有相同班级（.choices）的列表中添加额外的按钮时，会出现新的按钮，但它不会响应我的点击。

有什么建议吗？

<div class="buttons">
  <button id="button0" class="choices">Running</button>
  <button id="button1" class="choices">Yoga</button>
  <button id="button2" class="choices">Karate</button> 
</div>

JS

$("#add-button").click(function(){
  var inputValue = $("#add-input").val();
  var generatedId = "button" + healthyChoices.length;
  healthyChoices.push(inputValue);
  $("<button>").attr("id", generatedId).appendTo(".buttons");
  $("#" + generatedId).attr("value", inputValue);
  $("#" + generatedId).attr("class", "choices");
  $("#" + generatedId).text(inputValue);
  $("#add-input").val("");
});


$(".choices").click(function(){
  var selectedGroup = $(this).val();
  console.log(selectedGroup);
});

Answer 1

.click方法不处理动态添加到DOM中的元素。您应该使用.on方法（如dfsq的注释所示）。

请参阅此SO帖子：Difference between .on('click') vs .click()

将元素添加到DOM后如何选择

1 个答案: