2017-08-31 1 views
0

ich eine Liste der Elemente in HTML haben:Attrchange Bibliothek nicht innerhalb .each Arbeits()

<ul> 
    <li class="pagination_element current">1</li> 
    <li class="pagination_element">2</li> 
    <li class="pagination_element">3</li> 
    <li class="pagination_element">4</li> 
    <li class="pagination_element">5</li> 
</ul> 

unter bestimmten äußeren Bedingungen wird die „aktuelle“ Klasse zwischen den verschiedenen LI-Tags ändern. Ich schieße, um diese Gegenstände zu beobachten, wann immer sich ihre Klasse ändert, und dann zu bestimmen, welcher zu jeder Zeit "aktuell" ist.

Ich benutze eine Bibliothek namens attrchange (http://meetselva.github.io/), die in der Lage sein sollte, eine Callback-Funktion bei jeder Änderung der Klasse auszuführen.

Hier ist meine JS:

jQuery('.pagination_element').each(function() { 

    console.log(jQuery(this)); 

    jQuery(this).attrchange({ 
     trackValues: true, 
     callback: function (event) { 
      console.log('here!'); 
      console.log('Attribute Name: ' + event.attributeName + ' Prev Value: ' + event.oldValue + ' New Value: ' + event.newValue); 
     } 
    }); 

}); 

Die console.log (jQuery (this)); funktioniert und jeder LI wird an die Konsole ausgegeben. Der Teil, der nicht funktioniert, ist die attrchange(). Wenn sich die Klasse "current" an einer LI ändert, wird nichts in der Konsole protokolliert.

Ich habe jQuery, jQueryUI, attrchange.js und attrchange_ext.js in dieser Reihenfolge enthalten, und alle werden erfolgreich geladen.

+0

Es werden die Menschen Ihnen helfen, helfen, wenn Sie die Frage mit einem ** runnable aktualisiert ** [MCVE] mit Stapel-Schnipsel (die '[<>]' Symbolleistenschaltfläche), um das Problem zu demonstrieren. –

Antwort

0

Versuchen Sie folgendes:

$('.pagination_element').attrchange({ 
     trackValues: true, 
     callback: function (event) { 
          console.log('here!'); 
      console.log('Attribute Name: ' + event.attributeName + ' Prev Value: ' + event.oldValue + ' New Value: ' + event.newValue); 
     } 
}); 

Example