Jquery单击事件，不触发使用jquery动态创建的元素。
Jquery单击事件，不触发使用jquery动态创建的元素。
提问于 2014-03-24 12:55:51
我试图创建一个简单的功能，用户从下拉菜单中选择一些值，然后单击add按钮，以标记的形式在下面的div中添加所选的项。
每个添加的标记都有一个删除锚点，单击该锚点将移除标记。
现在，当单击add按钮时，标签将被正确插入，但当我单击“删除”按钮时，单击事件不会触发。
但是，如果我用与动态生成的标记完全相同的标记硬编码一些标记，则用于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>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
提前感谢
Stack Overflow用户
发布于 2014-03-24 14:25:52
$("#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()提供一个选择器。当对document元素进行单击时，jQuery检查它是否应用于与".remove“选择器匹配的该元素的子元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22610042
复制相关文章
相似问题
腾讯云开发者
