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

Jquery click event not firing on the element created dynamically using jquery

本文关键字：Jquery 元素 创建 事件 单击 动态      更新时间：2023-09-26

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

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

现在，当点击添加按钮时，标签被正确插入，但当我点击标签上的移除按钮时，点击事件并没有启动。

然而，如果我用与动态生成的标记完全相同的标记对一些标记进行硬编码，那么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();
});

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

这是演示

提前感谢

使用偶数委托代替

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

更多信息

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

$("#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"选择器匹配的元素的子元素。

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);
});
相关文章：