将点击事件添加到附加项目[重复]

Question

我正在尝试将 click 事件添加到我通过 jQuery 附加的元素中。 如果我的 HTML 代码中有该项目，则 click 事件可以正常工作。我希望代码能更好地解释它

HTML

<div id="addNew">Add new Item</div>
<div id="priceWrapper"></div>
<div class="price"></div>

JS

var data;
$('#addNew').click(function () {
    $('#priceWrapper').append('<div class="item" data-js="2.5" id="Item" >(I dont work i was not here on load)I AM AN ITEM WICH COSTS 2.5€</div>');
});
$('#Item').click(function () {
    data = $(this).attr("data-js");
    alert(data);
});

JsFiddle 中的示例

感谢您的帮助

Answer 1

使用 jQuery .on。更多信息here

var data;
$('#addNew').click(function (e) {
    e.preventDefault();
    $('#priceWrapper').append('<div class="item" data-js="2.5" id="Item" style="background-color:yellow;border-bottom:solid 5px green">(I dont work i was not here on load)I AM AN ITEM WICH COSTS 2.5€</div>');
});

$('body').on('click', '.item', function () {
    data = $(this).attr("data-js");
    alert(data);
});

Fiddle

---

这不起作用的原因是，首先，只有一个元素一次可以有一个id。我们必须将其设置为使用 class .item。另一个问题是事件正在设置页面加载时，因此它不会注意到新项目。