Question

我有一个非常奇怪的问题。我不确定为什么$ .data在更新数据属性后没有返回正确的值，即使该元素在firebug中具有正确的值。

<div>
    <input type="text" name="price" id="price"/>
</div>
<button type="button" id="submit" data-price="100">Submit</button>
<div id="result"></div>
<script>
$(document).ready(function(){
    $('#price').change(function(){

        $('#submit').attr('data-price',$(this).val());

    });

    $('#submit').click(function(){
        $('#result').html($(this).data('price'));
    });

});
<script>

Answer 1

您应该使用.data()

设置数据

$('#submit').data('price',$(this).val());

演示---> http://jsfiddle.net/gv5cR/2/

Answer 2

由于您已使用.attr()设置data-price值，因此您需要使用.attr()代替.data()来获取该值：

$('#result').html($(this).attr('data-price'));

Updated Fiddle

Answer 3

使用

$('#submit').click(function(){
    $('#result').html($(this).attr('data-price'));
});

Answer 4

data-*属性仅用于在内部jQuery缓存中找不到时初始化数据值...一旦将值复制到jQuery数据缓存中，对该属性所做的任何更改都不会反映在jQuery的数据值。

如果要更新jQuery数据中的值，则必须使用data api，而不是更改data-*属性。

演示：Fiddle

更新数据属性时，jQuery $ .data（）不返回正确的值

4 个答案: