javascript Jquery 单击事件不会在使用 jquery 动态创建的元素上触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22610042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery click event not firing on the element created dynamically using jquery
提问by Saurabh Palatkar
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.
我正在尝试创建一个简单的功能，用户从下拉列表中选择一些值，然后单击添加按钮以标签的形式在下面的 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.
现在，当点击添加按钮时，标签被正确插入，但是当我点击标签上的删除按钮时，点击事件没有触发。
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 eventis not firing for the dynamically generatedtags.
我的问题是为什么动态生成的标签没有触发点击事件。
Here is the Demo
这是演示
Thanks in advance
提前致谢
回答by Wilfredo P
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.
事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有子元素触发，无论这些子元素现在存在还是将来添加。
$(document).on('click', '.remove', function () {.....
回答by dinesh kumar
$("#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 检查它是否应用于与“.remove”选择器匹配的该元素的子元素。
回答by mohsin139
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);
});
