数据值在DOM中更新，而不是在函数中更新

Data-value updates in DOM, but not in function

本文关键字：更新 函数 数据 DOM      更新时间：2023-09-26

根据用户的选择改变按钮的文本。

$(".someClass").click(function() {
    $("#someID_1").text($(this).prop("innerHTML"));
    $("#someID_1").attr("data-value", $(this).data("value"));
    someFunction("someID_1");
});

然后我想调用一个函数someFunction。

function someFunction(someID) {
    console.log(parseInt($("#" + someID).data("value")))
    if ( parseInt($("#" + someID).data("value")) !== 10 ) {
        // do something
    } else {
        // do something else
    }
}

发生的事情是console.log在第一次函数调用(因此，第一次点击)时绘制选择的data-value。然而，当我选择新的东西并再次执行函数时，通过console.log绘制的data-value保持不变。看看DOM, data-value得到了更新。

为什么?

由于.data()使用内部缓存，它只使用使用data属性作为默认值，并且更新属性不会影响它，

需要使用.data(key, value)来设置value。如果你需要更新DOM，那么使用.attr() 

$("#someID_1").data("value", $(this).data("value"));

如果您使用attr()获取和设置，您将获得更新的值。不应该使用的是attr()和data()的混合。如果没有真正的理由更新属性，那么使用data()来获取和设置值。

Try 

$(document).on('click', ".someClass", function()
   {
       //your event logic
   }
相关文章：