Question

我想在动态创建的元素上使用.on ...虽然它不起作用，是的，但我使用的是选择器：）

$(".metadata").on("click", "i.icon-remove", function () {
    console.log("what");
    $(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});

这适用于现有内容，但不适用于动态创建的任何内容。初始和动态内容都使用完全相同的创建方法，所以我知道他们的签名是相同的，任何想法？

这是我的HTML，第一个项目存在于HTML中，第二个项目是动态创建的

<div class="metadata">
    <input type="text" value="" style="width: 200px;">
    <i class="icon-remove"></i>
</div>
<div class="metadata" style="">
    <input type="text" maxlength="100" style="width: 200px;">
    <i class="icon-remove"></i>
</div>

Answer 1

试试这个

$(document).on("click", ".metadata i.icon-remove", function () {
    console.log("what");
    $(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});

Answer 2

作为Pranav答案的附录，请尽量避免在$(document)之外执行委派活动 - 这会导致在页面中任何位置发生的所有事件与您的匹配进行检查选择器。

更好的方法是从一开始就使用页面上存在的更有针对性的选择。像

这样的东西

$('#otherDivThatsThere').on("click", "i.icon-remove", function () {
    console.log("what");
    $(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});

在运行代码行的那一刻，你的dom中#otherDivThatsThere 已经已经了。

jQuery不适用于动态添加的元素

2 个答案: