Erkennung der Attributwertänderung eines Attributs, das ich gemacht habe

Question

Ich habe ein Attribut in HTML data-select-content-val erstellt und es ist 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!"); 
}); 

Answer 1

Sie müssten den DOM Knoten Änderungen beobachten. Es gibt eine API namens MutationObserver, aber es scheint, dass die Unterstützung dafür sehr begrenzt ist. Diese SO answer hat einen Link zu der status der API, aber es scheint, dass es keine Unterstützung für IE oder Opera bisher 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 ausgibt, das Sie hören können.

Zum Beispiel, siehe: http://jsbin.com/arucuc/3/edit auf, wie man es zusammen bindet.

Der Code ist hier

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

Answer 2

Es gibt this Erweiterungen, die ein Ereignis-Listener Änderungen Attribut hinzufügt.

Verbrauch:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" 
    src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script> 

Bind attrchange Handler-Funktion 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 
    }   
}); 

Answer 3

können Sie MutationObserver benutzen, um Änderungen zu verfolgen data-* Änderungen einschließlich zuschreiben. Zum Beispiel:

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;

<div id='foo'></div>