Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
25
rated 0 times [  31] [ 6]  / answers: 1 / hits: 16846  / 11 Years ago, tue, june 18, 2013, 12:00:00

I need to detect some class changing, i use for this DOMAttrModified, but something is wrong, what?



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');
}
});


Thx for advice.


More From » jquery

 Answers
35

The immediate problem is that a attrName property isn't part of jQuery's event's object...you need to use e.originalEvent.attrName. Here's an example of it working:



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/



The setTimeout is to simulate the event randomly happening.



Apparently, the DOMAttrModified event is not supported in all browsers - http://help.dottoro.com/ljfvvdnm.php#additionalEvents






UPDATE:



Using the newer MutationObserver, the following shows the use of both ideas:



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/



Reference:




[#77563] Monday, June 17, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
myakylas

Total Points: 66
Total Questions: 85
Total Answers: 95

Location: Guadeloupe
Member since Sat, Aug 22, 2020
4 Years ago
myakylas questions
Thu, Apr 28, 22, 00:00, 2 Years ago
Thu, Apr 8, 21, 00:00, 3 Years ago
Sat, Sep 19, 20, 00:00, 4 Years ago
;