jQuery 更新數據屬性時 $.data() 未返回正確的值

Question

我有一個非常奇怪的問題。 我不確定為什么 $.data 在更新數據屬性后沒有返回正確的值，即使該元素在螢火蟲中具有正確的值。

演示： http://jsfiddle.net/gv5cR/

<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'));

更新小提琴

Answer 3

使用像

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

Answer 4

data-*屬性僅在內部jQuery緩存中未找到時才用於初始化數據值。一旦將值復制到jQuery數據緩存中，對該屬性所做的任何更改將不會反映在jQuery的數據值中。

如果要更新jQuery數據中的值，則必須使用data api ，而不是更改data-*屬性。

演示： 小提琴

Answer 5

只需使用

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