Jquery单击事件不触发使用Jquery动态创建的元素

I am trying to make a simple functionality where user selects some value from drop down and then clicks on the add button to add the selected item in the below div in the form of tag.

我正在尝试做一个简单的功能，用户从下拉菜单中选择一些值，然后单击add按钮，以标记的形式添加下面div中的选定项。

Each added tag has a remove anchor which when clicked removes the tag.

每个添加的标记都有一个移除锚点，单击该锚点时将移除标记。

Now when clicked on add button the tags are being inserted correctly, But when I clicked on the remove button over tag, the click event is not firing.

现在，当单击add按钮时，标签被正确插入，但是当我单击标签上的remove按钮时，单击事件没有触发。

However if I hard coded some tags with exact same markup as that of dynamically generated tags, the click event for remove tag is firing exact properly and the tag is being removed as I wanted.

但是，如果我硬编码一些标记与动态生成的标记具有完全相同的标记，那么删除标记的单击事件将正确地触发，标记将按我的要求删除。

HTML:

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:

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();
});

My question is that why the click event is not firing for the dynamically generated tags.

我的问题是为什么单击事件没有触发动态生成的标记。

Here is the Demo

这是演示

Thanks in advance

谢谢提前

3 个解决方案

#1

Use even delegation instead

使用甚至代表团

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

事件委托允许我们将单个事件侦听器附加到父元素，该侦听器将为匹配选择器的所有子元素触发，无论这些子元素现在存在还是将来添加。

More info

更多信息

$(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();
});

event binding will not work for dynamically generated elements. For this you need to bind to an element that exists at the moment that the JS runs (which is the document), and supply a selector in the second parameter to .on(). When a click occurs on document element jQuery checks whether it applied to a child of that element which matches the ".remove" selector.

事件绑定不适用于动态生成的元素。为此，需要绑定到运行JS时存在的元素(即文档)，并在第二个参数中为.on()提供一个选择器。当文档元素jQuery发生单击时，检查它是否应用于与“”匹配的元素的子元素。删除“选择器。

#3

jQuery .click does not work with dynamically created html elements you need to bind event. Here is the code to do that.

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);

});

#1