Wykrywanie zmiany atrybutu wartości atrybutu, który utworzyłem

Question

Utworzono atrybut w HTML data-select-content-val i jest on napychany dynamicznie.

Czy istnieje sposób na wykrycie, kiedy wartość atrybutu uległa zmianie?

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

Answer 1

Będziesz musiał obejrzeć zmiany węzła DOM. Istnieje interfejs API o nazwie MutationObserver, ale wygląda na to, że wsparcie dla niego jest bardzo ograniczone. To SO answer ma link do interfejsu API status, ale wygląda na to, że nie ma w nim dotąd wsparcia dla IE lub Opery.

Jednym ze sposobów obejścia tego problemu jest posiadanie części kodu modyfikującej atrybut data-select-content-val wysyłającej wydarzenie, którego można słuchać.

Na przykład zobacz: http://jsbin.com/arucuc/3/edit, jak powiązać ze sobą.

kod tutaj jest

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

Jest this rozszerzenia, które dodaje detektor zdarzeń do zmiany atrybutów.

Zastosowanie:

<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 funkcja obsługi attrchange do wybranych elementów

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

MutationObserver można użyć atrybutu do śledzenia zmian w tym data-* zmian. Na przykład:

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>