Javascript 在使用Jquery动态创建的元素上未触发Jquery单击事件

我试图制作一个简单的功能，用户从下拉列表中选择一些值，然后单击add按钮，以tag的形式将所选项目添加到下面的div中

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

现在，当单击“添加”按钮时，标签被正确插入， 但是当我单击remove按钮over标记时，click事件并没有触发

但是，如果我用与动态生成的标记完全相同的标记硬编码了一些标记，那么remove标记的click事件将正确地触发，并且标记将按照我的要求被删除

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>

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

标记一
标签二
标签三


标记1硬编码

提前感谢
甚至可以使用授权

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


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

});

$（“body”）。在函数（e）上（“单击”和“插入标签”）{
var selectedTagText=$（“#ddlTagName选项：选定”）.text（）；
var selectedTagValue=$（'#ddlTagName'）.val（）；
var generateMarkup=''+selectedTagText+'X'；
$（“#TagsHolder”）.append（generateMarkup）；
});
$（“#btn插入标签”）。在（'click'，函数（）{
var selectedTagText=$（“#ddlTagName选项：选定”）.text（）；
var selectedTagValue=$（'#ddlTagName'）.val（）；
var generateMarkup=''+selectedTagText+'X'；
$（“#TagsHolder”）.append（generateMarkup）；
});
$（文档）.on（'click'，.remove'，函数（）{
警报（“点击事件触发”）；
$（this.parent（“.tag”）.remove（）；
});

事件绑定对于动态生成的元素不起作用。为此，您需要绑定到JS运行时存在的元素（即文档），并在第二个参数中为.on（）提供选择器。当在文档元素上单击时，jQuery会检查它是否应用于该元素的子元素，该子元素与“.remove”选择器匹配。
盯着你的问题标题，并得到第一个结果：
$("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);

});

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