кэширование Jquery данных- * атрибуты

Question

В моей HTML странице, у меня есть следующий DIV:

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

Ajax вызов добавить некоторый атрибут этого DIV после получения успешного response.This является то, что делает Аякс успеха :

$("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"); 
      } 
     }); 
    }); 

проблема заключается в том, что атрибуты #notification не уходит после использования removeAttr. Я имею в виду, что он удаляет атрибуты со страницы, но остается в кеше. То почему Я получаю такое же сообщение данных на каждом щелчке, хотя сервер возвращает другое сообщение данных.

Например:

В моем первом вызове Ajax, сервер возвратил:

{"status":"success","message":"Invitation sent"} В этом случае #notification спусковые и показывает мне данные-сообщение = "Приглашение отправлено". Но на втором сервере вызова возвращается:

{"status":"danger","message":"Invitation sending failed"} Но #notification показывает данные-сообщение = «Приглашение отправлено» снова.

Любое предложение для меня об этом? Как удалить кэшированные данные? Или есть какая-то альтернатива тому, что я там делаю?

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() 

}