javascript - jQuery 获取数据属性不起作用

Question

我有一个脚本，可以生成多个带有类的按钮，我希望它在单击时提醒数据属性，但它不起作用。

这是 HTML 的输出

<button class="request box-button" data-value="18492500814">Request</button>

jQuery 代码

$(document).ready(function(){
    $('.request').each(function () {
        var photoID = $(this);
        photoID.click(function () {
            alert($(this).data('value'));
        });
    });
});

Answer 1

由于页面加载时您的元素不存在，因此事件不会绑定(bind)到它们。通过使用事件委托(delegate)解决这个问题:

$(document).ready(function(){
    $(document).on('click','.request', function () {
            alert($(this).data('value'));
    });
});

JS Fiddle demo具有动态生成的元素

注意:这里，我使用了 $(document).on() 因为我没有您的页面结构。但是，如果您将按钮插入 HTML 中已存在的容器中，请改用:$('#myContainer').on()。它不会很明显，但对于性能来说这是最好的。