Jak wykryć zmianę klasy przez DOMAttrModified

Question

Potrzebuję wykryć niektóre zmiany klasy, używam tego DOMAttrModified, ale coś jest nie tak, co?

var first_img = $('body').find('li:first').find('img'); 

first_img.on('DOMAttrModified',function(e){ 
    if (e.attrName === 'class') { 
     if ($(this).hasClass('current-image')) { 
      $(this).removeClass().addClass('previous-image'); 
     } 
     console.log('log'); 
    } 
}); 

Prosimy o poradę.

Answer 1

Bezpośrednim problemem jest to, że właściwość attrName nie jest częścią obiektu zdarzenia jQuery ... musisz użyć . Oto przykład z nim pracować:

var first_img = $("body").find("div").first(); 

first_img.on("DOMAttrModified", function (e) { 
    if (e.originalEvent.attrName === "class") { 
     console.log("##DOMAttrModified, class changed"); 
     if ($(this).hasClass("current-image")) { 
      console.log("##Element has 'current-image' class, changing"); 
      $(this).removeClass().addClass("previous-image"); 
     } 
    } 
}); 

setTimeout(function() { 
    first_img.addClass("current-image"); 
}, 1000); 

DEMO:http://jsfiddle.net/R5rTy/1/

setTimeout jest symulacja zdarzenia losowe dzieje.

Najwyraźniej zdarzenie DOMAttrModified nie jest dostępna we wszystkich przeglądarkach - http://help.dottoro.com/ljfvvdnm.php#additionalEvents

---

UPDATE:

Korzystanie nowsze MutationObserver dodaje pokazuje wykorzystanie obu pomysłów:

var firstImg, observerConfig, firstImgObserver; 

firstImg = $("body").find("div").first(); 
observerConfig = { 
    attributes: true, 
    childList: true, 
    characterData: true 
}; 
firstImgObserver = new MutationObserver(function (mutations) { 
    mutations.forEach(function (mutation) { 
     var newVal = $(mutation.target).prop(mutation.attributeName); 
     if (mutation.attributeName === "class") { 
      console.log("MutationObserver class changed to", newVal); 
     } else if (mutation.attributeName === "id") { 
      console.log("MutationObserver id changed to", newVal); 
     } 
    }); 
}); 

firstImgObserver.observe(firstImg[0], observerConfig); 
// later, you can stop observing 
//observer.disconnect(); 

firstImg.on("DOMAttrModified", function (e) { 
    var newVal = $(this).prop(e.originalEvent.attrName); 
    console.log("DOMAttrModified", e.originalEvent.attrName, "changed to", newVal); 
}); 

setTimeout(function() { 
    firstImg.addClass("previous-image").addClass("fdsa"); 
}, 1000); 

DEMO:http://jsfiddle.net/ybGCF/

referencyjny:

• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver