jQuery获取数据属性不工作

jQuery getting data attribute not working

本文关键字：工作 数据属性 获取 jQuery      更新时间：2023-09-26

我有一个脚本，产生一些按钮与类，我希望它提醒数据属性点击，但它不工作。

下面是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'));
        });
    });
});

由于页面加载时元素不存在，因此事件不会绑定到它们。通过使用事件委托:

来修复这个问题
$(document).ready(function(){
    $(document).on('click','.request', function () {
            alert($(this).data('value'));
    });
});

JS演示动态生成元素

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

为什么不把侦听器放在请求上，而不是在循环内呢?也使用attr来获取数据值

$(document).ready(function(){
    $('.request').click(function () {
        alert($(this).attr('data-value'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="request box-button" data-value="18492500814">Request</button>

尝试attr方法

$(document).ready(function(){
    $('.request').each(function () {
        var photoID = $(this);
        photoID.click(function () {
            alert($(this).attr('data-value'));
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="request box-button" data-value="18492500814">Request</button>

相关文章：