Erkennen der Attributänderung des Werts eines Attributs, das ich gemacht habe

Ich habe ein Attribut in HTML- data-select-content-val und es wird dynamisch mit Informationen gefüllt.

Gibt es eine Möglichkeit festzustellen, wann sich der Wert des Attributs geändert hat?

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

Sie müssten beobachten, wie sich der DOM-Knoten ändert. Es gibt eine API namens MutationObserver , aber es scheint, dass die Unterstützung dafür sehr begrenzt ist. Diese SO- Antwort hat einen Link zum Status der API, aber es scheint, als ob es bisher keine Unterstützung in IE oder Opera gibt.

Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, dass der Teil des Codes, der das Attribut ” data-select-content-val ändert, ein Ereignis data-select-content-val , das Sie abhören können.

Sehen Sie zum Beispiel: http://jsbin.com/arucuc/3/edit, wie Sie es zusammenbinden.

Der Code hier ist

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

Es gibt diese Erweiterungen, die Attributänderungen einen Ereignis-Listener hinzufügen.

Verwendung:

   

Binden Sie die Attributübertragungsfunktion an ausgewählte Elemente

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

Sie können MutationObserver verwenden , um Attributänderungen einschließlich Datenänderungen zu verfolgen. Beispielsweise:

 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; 
  

Keine der obigen Antworten ist im Jahr 2018 korrekt. Einige von ihnen sind nicht wirklich an das Ereignis gebunden, sondern versuchen es manuell aufzurufen (???), die anderen, weil sie keine native jQuery verwenden und stattdessen Erweiterungen verwenden .

Die native jQuery-Lösung ist:

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

oder

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