Обнаружение изменения атрибута значения атрибута, который я сделал
Я создал атрибут в HTML data-select-content-val и динамически заполнен информацией.
Есть ли способ определить, когда значение атрибута изменилось?
$(document).on("change", "div[data-select-content-val]", function(){ alert("BOOP!"); });
- Изменение значка Twitter-загрузки 3.0 при крахе
- jquery scroll, изменить активный class навигации, поскольку страница прокручивается относительно разделов
- jQuery append fadeIn
- jQuery для извлечения и установки выбранного значения параметра элемента html select
- jQuery UI Resizable andResize reverse
- Что означает объект ? (JavaScript)
- Использование .text () для извлечения только текста, не вложенного в дочерние tags
- Как отредактировать выбранную ячейку на jqGrid
- Получение ошибки 400 ошибок в JQuery AJAX POST
- Как мы можем указать правила для плагина проверки правильности jquery по classу?
- jQuery, если div содержит этот текст, замените ту часть текста
- JQuery UI tooltip не поддерживает html-контент
- Кнопка переключения текста в jquery
Вам придется наблюдать за изменениями узла 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") ); }); });