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

由于页面加载时元素不存在,因此事件不会绑定到它们.通过使用事件委派修复它:

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

JS Fiddle演示,包含动态生成的元素

注意:我在这里使用,$(document).on()因为我没有页面的结构.但是,如果您将按钮插入HTML中已存在的容器中,请使用以下内容:$('#myContainer').on().它不会引人注意,但最好是性能.