0

for example suppose that I have this div tag

<div class="x"></div>

so how to add a listener on this div to trigger an event if the class value became "x y" or "y" for example, can I do this using jquery?

what I want is something like to check this element if it has a new update , this update could be happen without triggering any event like(click or mouseover, ...), it could be changed periodically, like to get a new update from the server side, like adding a new class or adding a new content to this div so can I add a listener to check any update could be done over this element

Mo Haidar
  • 3,748
  • 6
  • 37
  • 76
  • Do you have an existing listener on element? Keep in mind that listeners are not bound to the class...but the element itself. – charlietfl Feb 01 '16 at 00:11
  • maybe my question is not clear enough, what I want is something like to check this element if it has a new update , this update could be happened without doing event like(click or mouseover), it could be changed periodically, like to get a new update from the server side and this could update the current element like adding a new class or adding a new content to this dive so can I add a listener to check any update could be done over this element – Mo Haidar Feb 01 '16 at 00:22
  • Then rewrite the question properly and provide full details of situation – charlietfl Feb 01 '16 at 00:23
  • Out of curiosity... what's the event you want to trigger? – Rounin Feb 01 '16 at 00:46
  • 1
    Try exploring this - http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242#11546242 – Nikolay Ermakov Feb 01 '16 at 00:50
  • Can you tell what exactly the change in the div you are expecting and what are the contents of the div? – A.Essam Feb 01 '16 at 00:51
  • @NikolayErmakov thanks, this could be helpful. – Mo Haidar Feb 01 '16 at 00:55
  • Take a look at this question http://stackoverflow.com/questions/19401633/how-to-fire-event-on-class-change-using-jquery – Jules Feb 01 '16 at 00:55
  • @YehiaSedky change could be on content or on some attributes of the element like class attribute, date-* attribute and so on. – Mo Haidar Feb 01 '16 at 00:56
  • @Rounin I wrote in my question that > this update could be happen without triggering any event like(click or mouseover, ...), it could be changed periodically, like to get a new update from the server side, like adding a new class or adding a new content to this div – Mo Haidar Feb 01 '16 at 00:59
  • Apologies, my question was ambiguous. I didn't mean "What event are you listening for?" - I meant "What change do you want to see happen to the element, when the listener fires?" – Rounin Feb 01 '16 at 01:03
  • @Jules thanks but this is not the case because I do not have the control over the script that changes the element. – Mo Haidar Feb 01 '16 at 01:04
  • As far as I know there is are no events for changing a class or an attribute. Please take a look at http://stackoverflow.com/questions/1950038/jquery-fire-event-if-css-class-changed – A.Essam Feb 01 '16 at 01:06

1 Answers1

1

What you are looking for is MutationObserver read about it here - https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Depending on your browser support requirements, you might need to use a framework. Checkout the codepen:

http://codepen.io/anon/pen/NxzJWY (code is directly from the MDN reference)

Code dump:

// select the target node
var target = document.querySelector('#element');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    document.write(mutation.type);
    document.write('<br />');
    console.log(mutation);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: false, characterData: false };

// pass in the target node, as well as the observer options
observer.observe(target, config);

target.className = 'test'; // change this class and watch the output from the observe callback above

Note: The callback returns a reference to each "mutation" and each mutation returns a references to a whole bunch of data about the mutation. Checkout the browser console to inspect the mutation object.

unpollo
  • 806
  • 5
  • 15