How can I create a custom event using jquery

Question

I want to create an event when the content of a div changes, the event is called..

change = function(oldval,newval){
    if (oldval != newval){
        return true;
    }
    return false;
}

I want this function to be called everytime the content of a div changes ..Any idea how i can achieve this ?

Possible duplicate of DOM Mutation event in JQuery or vanilla Javascript. Some of the answers there link to jQuery plugins that might solve your problem. Handling DOM mutation events is often trickier than it looks, though. — Frédéric Hamidi
– Frédéric Hamidi, Commented Feb 5, 2012 at 8:43

gdoron · Accepted Answer · 2012-02-05 10:44:40Z

1

I want this function to be called everytime the content of an element changes

If the content of an element equals to the value of form inputs:

One line code:

$(':input', $('#divId')).change(function(){alert('changed');});

Or the delegate option for dynamic added elements (still one line... (; ):

$('#divId').on('change', ':input', function(){ alert('changed');});

docs:

edited Feb 5, 2012 at 10:44

answered Feb 5, 2012 at 8:31

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Frédéric Hamidi Over a year ago

Why does this get upvoted? It won't raise the event when the content of the <div> changes, but when the value of a form control inside of it changes, which is not the same thing at all. And the last sentence is not even complete...

gdoron Over a year ago

@FrédéricHamidi. I'm sure this is what the qustion owner meant. "content of an element changes"

Frédéric Hamidi Over a year ago

Indeed, content of a div changes, not value of form controls inside a div changes. I'm afraid the questioner is looking for the former (mutation events), not the latter...

gdoron Over a year ago

@FrédéricHamidi. We shall wait for the question owner response... Anyway it's a good answer, the question isn't clear enough.

gdoron Over a year ago

@FrédéricHamidi. "content of an element changes" not "content of a div changes"!

|

Mouna Cheikhna · Accepted Answer · 2012-02-05 11:53:40Z

1

If you arent planning on supporting IE you can use DOMNodeInserted and DOMNodeRemoved to check if elements are added or removed from your div.

$('#yourDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event, oldvalue, newvalue) {
   if (oldval != newval){
        return true;
    }
    return false;
});

for IE support you can use

$(function() {
  var $div = $("#yourDiv");
  var content = $div.html();
  var look = setInterval(function() {
    var newcontent = $div.html();
    if (html != newcontent ) {
      change(content, newcontent); 
      content = newcontent;
    }
  },100);

  function change(oldval, newval() {
     if (oldval != newval){
        return true;
    }
    return false;
  }
});

edited Feb 5, 2012 at 11:53

answered Feb 5, 2012 at 11:45

Mouna Cheikhna

39.8k10 gold badges50 silver badges69 bronze badges

1 Comment

gdoron Over a year ago

where do the oldvalue, newvalue values come from ?!

Collectives™ on Stack Overflow

How can I create a custom event using jquery

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related