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

Question

On my HTML I have buttons list and text input field. Input field is to add extra buttons to my buttons list.

On jQuery I have eventListener when one of these buttons with .choices is clicked console log its value.

It works fine without any errors. But when I add extra button to my list with same class (.choices) new button appears but it doesn't respond to my click.

Any suggestions?

<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

The .click method does not handle elements dynamically added to the DOM. You should be using the .on method (as indicated by dfsq's comment).

See this SO post: Difference between .on('click') vs .click()