Событие Jquery click не запускает элемент, созданный динамически с помощью jquery

Я пытаюсь сделать простую функциональность, когда пользователь выбирает какое-то значение из раскрывающегося списка, а затем нажимает кнопку добавления, чтобы добавить выбранный элемент в нижеприведенный div в виде тега.

Каждый добавленный тег имеет привязку удаления, которая при нажатии удаляет тег.

Теперь при нажатии кнопки добавления теги устанавливаются правильно, Но когда я нажал кнопку "Удалить" над тегом, событие click не запускается.

Однако, если я жестко закодировал некоторые теги с такой же разметкой, что и для динамически генерируемых тегов, событие click для тега remove корректно выполняется, и тег удаляется по мере необходимости.

HTML:

    <select id="ddlTagName">
    <option value="1">Tag One</option>
    <option value="2">Tag Two</option>
    <option value="3">Tag Three</option>
</select>
<input id="btnInsertTag" type="button" value="Add"/>
<br/>

<div id="TagsHolder">
  <span class="tag">
      <span>Tag One HardCoded </span>
      <a class="remove">X</a>
  </span>

  <span class="tag">
      <span>Tag Two HardCoded </span>
      <a class="remove">X</a>
  </span>
</div>

JS:

    $("#btnInsertTag").click(function () {
    var selectedTagText = $("#ddlTagName option:selected").text();
    var selectedTagValue = $('#ddlTagName').val();
    var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>';
    $("#TagsHolder").append(generateMarkup);
});

$(".remove").click(function () {
    alert('click event triggered');
    $(this).parent(".tag").remove();
});

Мой вопрос в том, почему событие click не работает для динамически генерируемых тегов.

Вот Демо

Заранее спасибо

Ответы

Ответ 1

Использовать только делегирование вместо

Событие делегирование позволяет нам присоединить одного прослушивателя событий к родительский элемент, который будет срабатывать для всех детей, соответствующих селектору, существуют ли эти дети сейчас или добавлены в будущем.

Подробнее

$(document).on('click', '.remove', function () {.....

Ответ 2

$("#btnInsertTag").on('click',  function () {
  var selectedTagText = $("#ddlTagName option:selected").text();
  var selectedTagValue = $('#ddlTagName').val();
  var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' +   selectedTagText + ' </span><a class="remove">X</a></span>';
  $("#TagsHolder").append(generateMarkup);
});
$(document).on('click', ".remove", function () {
       alert('click event triggered');
   $(this).parent(".tag").remove();
});

привязка события не будет работать для динамически генерируемых элементов. Для этого вам необходимо привязать элемент, который существует в момент запуска JS (который является документом), и поставьте селектор во втором параметре на .on(). Когда в элементе документа происходит щелчок, jQuery проверяет, применяется ли он к дочернему элементу этого элемента, который соответствует селектору ".remove".

Ответ 3

jQuery.click не работает с динамически создаваемыми элементами html, которые необходимо связать с событием. Вот код для этого.

$("body").on("click", "#btnInsertTag", function(e){

 var selectedTagText = $("#ddlTagName option:selected").text();
 var selectedTagValue = $('#ddlTagName').val();
 var generateMarkup = '<span class="tag" data-value="' + selectedTagValue + '"><span>' + selectedTagText + ' </span><a class="remove">X</a></span>';
 $("#TagsHolder").append(generateMarkup);

});