Question

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

每个添加的标签都有一个删除锚点，点击后会删除标记。

现在点击添加按钮时正确插入标签，但是当我点击标签上的删除按钮时，点击事件没有触发。

但是，如果我使用与动态生成的标签完全相同的标记对某些标签进行硬编码，则删除标签的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>

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

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

以下是Demo

提前致谢

Answer 1

使用偶数代理

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

More info

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

Answer 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会检查它是否应用于该元素的子元素，该子元素与＆＃34; .remove＆＃34;选择器。

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

});

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

3 个答案: