Question

在我的HTML页面中，我有以下div：

<div id="notification"></div>

ajax调用在收到成功响应后为该div添加一些属性。这就是ajax成功的作用：

$("form").on("submit", function (e) {
        e.preventDefault();
        $.ajax({
            dataType: 'json',
            type: "POST",
            url: "/dummy/url",
            data: {Redacted},
            success: function (data) {
                $('#notification').attr({'data-status': data['status'], 'data-message': data['message']});
                $('#notification').click();
                $('#notification').removeAttr("data-status data-message");
            }
        });
    });

问题是使用removeAttr后#notification的属性不会消失。我的意思是它从页面中删除属性，但仍保持缓存。这就是为什么我在每次点击时获得相同的数据消息，尽管服务器返回不同的数据消息。

例如：

在我的第一个ajax调用中，服务器返回：

{"status":"success","message":"Invitation sent"} 在这种情况下，#notification会触发并向我显示data-message =＆＃34; 邀请已发送＆＃34;。但在我的第二个呼叫服务器返回：

{"status":"danger","message":"Invitation sending failed"} 但#notification显示data-message =＆＃34; 邀请已发送＆＃34;试。

对此我有什么建议吗？如何删除缓存的数据？或者有什么替代我在那里做什么？

Answer 1

使用data()而不是使用属性。如果您已经使用data()来读取属性，那么它将被缓存为元素的属性。

success: function (data) {
    var elementData = {
        status: data['status'],
        message: data['message']
    }

    $('#notification').data(elementData);
    $('#notification').click();
    // not sure why it needs to be removed here
    // if it does use `removeData()

}

Jquery缓存data- *属性

1 个答案: