将点击事件添加到附加项

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。另一个问题是事件正在设置 当页面加载时 所以它不会注意到新项目。

将点击事件添加到附加项

Add click event to appended item

html

javascript

jquery

append

click