jQuery，data（）不更新数据属性[重复]答案

【问题标题】：jQuery, data() not updating data attribute [duplicate]jQuery，data（）不更新数据属性[重复]
【发布时间】：2016-05-17 23:49:32
【问题描述】：

我有下面的 HTML 和相关的 jQuery。 html 函数工作正常，但 data 函数根本不影响 HTML，我这辈子都想不通，浏览器根本没有错误。

HTML

<span id="usernameStatus" data-valid="0">x</span>

jQuery

data 由 AJAX 调用返回，它只会是 true 或 false。

function validUsername(data)
{        
    if (data === 'true') {
        $("#usernameStatus").html("y").data("valid", 1);
    } else {
        $("#usernameStatus").html("x").data("valid", 0);
    }
}

【问题讨论】：

Possible duplicate.
很确定数据功能没有像您期望的那样工作。我很确定 jquery 会复制/引用/复制数据属性，因此您更改的不是 attr。如果您在更改后查看同一元素的 .data，您会看到它已更改，但 html 属性将保持不变。
你可以在这里找到一个很好的解释：stackoverflow.com/questions/36663690/…

标签： javascript jquery html ajax

【解决方案1】：

每个 jQuery API 文档

.data() 方法允许我们以一种安全的方式将任何类型的数据附加到 DOM 元素，从而避免循环引用，从而避免内存泄漏。

.data() 方法不会修改现有的 DOM 节点，但只能通过调用 $selector.data() 来检索。您的 DOM 元素不会改变，只是附加到它们的数据。

【讨论】：

【解决方案2】：

.data() 方法不会修改 DOM 元素的属性。但是，数据仍然通过保存。 $selector.data( key, value ); 可以通过以下方式检索。 $selector.data( key );

为了向 DOM 元素添加属性，您可能需要使用 .attr() method。使用.attr()，可以将属性附加到元素上。 $selector.attr( key, value ); 可以通过以下方式检索。 $selector.attr( key );

    validUsername(data) {       
        if (data === 'true') {
            $("#usernameStatus").html("y").attr("data-valid", 1);
        } else {
            $("#usernameStatus").html("x").attr("data-valid", 0);
        }
    }

JSFiddle example

使用.attr() 代替.data() 的优点之一是能够通过某个属性（和值）找到所有元素。 $('[key="value"]') 选择器。

【讨论】：

【解决方案3】：

你可以这样做：

$("#usernameStatus").attr('data-valid','1');

而不是返回元素内部内容的 .html() 。

【讨论】：