Обнаружение изменения атрибута значения атрибута, который я сделал

Я создал атрибут в HTML data-select-content-val и динамически заполнен информацией.

Есть ли способ определить, когда значение атрибута изменилось?

 $(document).on("change", "div[data-select-content-val]", function(){ alert("BOOP!"); }); 

Вам придется наблюдать за изменениями узла DOM. Существует API под названием MutationObserver , но похоже, что поддержка для него очень ограничена. Этот ответ SO имеет ссылку на статус API, но похоже, что в IE или Opera пока нет поддержки.

Один из способов, которым вы могли бы решить эту проблему, – это часть кода, который изменяет атрибут data-select-content-val отправляет событие, которое вы можете прослушать.

Например, см. http://jsbin.com/arucuc/3/edit о том, как связать это вместе.

Код здесь

 $(function() { // Here you register for the event and do whatever you need to do. $(document).on('data-attribute-changed', function() { var data = $('#contains-data').data('mydata'); alert('Data changed to: ' + data); }); $('#button').click(function() { $('#contains-data').data('mydata', 'foo'); // Whenever you change the attribute you will user the .trigger // method. The name of the event is arbitrary $(document).trigger('data-attribute-changed'); }); $('#getbutton').click(function() { var data = $('#contains-data').data('mydata'); alert('Data is: ' + data); }); }); 

Есть такие расширения, которые добавляют слушателя событий к изменениям атрибута.

Применение:

   

Функция привязки привязки к выбранным элементам

 $(selector).attrchange({ trackValues: true, /* Default to false, if set to true the event object is updated with old and new value.*/ callback: function (event) { //event - event object //event.attributeName - Name of the attribute modified //event.oldValue - Previous value of the modified attribute //event.newValue - New value of the modified attribute //Triggered when the selected elements attribute is added/updated/removed } }); 

Вы можете использовать MutationObserver для отслеживания изменений атрибутов, включая изменения data-* . Например:

 var foo = document.getElementById('foo'); var observer = new MutationObserver(function(mutations) { console.log('data-select-content-val changed'); }); observer.observe(foo, { attributes: true, attributeFilter: ['data-select-content-val'] }); foo.dataset.selectContentVal = 1; 
  

Ни один из приведенных выше ответов не верен в 2018 году. Некоторые из них, потому что они фактически не привязаны к событию, а вместо этого пытаются вызвать его вручную (???), другие, потому что они не используют собственный jQuery и вместо этого используют расширения ,

Нативным решением jQuery является:

 $("#element-to-observe").bind('change', function(event) { alert( 'The value has been changed to '+$("#element-to-observe").attr("value") ); }); 

или

 $(document).ready(function(){ $("#element-to-observe").change(function(){ alert('The value has been changed to '+ $("#element-to-observe").attr("value") ); }); }); 
  • $ .ajax call отлично работает в IE8 и не работает в браузерах Firefox и Chrome
  • Как получить элемент nth jQuery
  • Получить внешний HTML-код выбранного элемента
  • Как разбирать данные JSON с помощью jQuery / JavaScript?
  • jQuery для сериализации только элементов в div
  • Ошибка: нечистить SyntaxError: Неожиданный токен <
  • Выберите , который href заканчивается некоторой строкой
  • Проверка ввода массива с использованием модуля проверки правильности jquery
  • Проводка данных JSON в ASP.NET MVC
  • Проверка jquery проверяет хотя бы один флажок
  • Удаление файла из нескольких загружаемых файлов при нажатии кнопки при использовании ввода файла HTML5
  • Давайте будем гением компьютера.