event, when (inner) html changes

I would like to catch the ev开发者_Go百科ent when the innerHTML of an element changes due to "ajaxing".

I mean something like this:

$('.t_error span').html.change(function(){
... 
});

Thanks for help!

---

In all modern browsers you can use the MutationObserver api to watch for structural changes of any DOM node or subtree. If you don't care a lot for what those changes are, and just want to listen for them and take action, you can get by with a very small library similar to what you ask for. Try it out a bit in this JSFiddle:

// a minimal jQuery library for reacting to innerHTML changes
(function($) {
  $.fn.change = function(cb, e) {
    e = e || { subtree:true, childList:true, characterData:true };
    $(this).each(function() {
      function callback(changes) { cb.call(node, changes, this); }
      var node = this;
      (new MutationObserver(callback)).observe(node, e);
    });
  };
})(jQuery);

Usage: $(elements).change(callback, optional_events) where elements is elements you care about (or a selector for them), callback is your function and optional_events, when given, is an object with the properties the W3C spec let you watch, or the default set above. As in typical jQuery event handlers, your callback's this object will be the node something happened in. If you want to peek at the list of all changes recorded, your event handler gets those as its first argument, and should you want to poke at the observer itself, that's its second argument.

---

There is no way to do what you ask - however, instead you can use this construct:

 $.ajax({
   type: "GET",
   url: yourUrl:,
   success: function (data) {
       ajaxComplete();
   }
 });

---

 function ajaxComplete()
 { 
    ....
 }

EDIT: If you want to be cleverer, you could use Custom Events:

Basically define a CustomEvent function:

var CustomEvent = function() {
  //name of the event
  this.eventName = arguments[0];
  var mEventName = this.eventName;

  //function to call on event fire
  var eventAction = null;

  //subscribe a function to the event
  this.subscribe = function(fn) {
    eventAction = fn;
  };

  //fire the event
  this.fire = function(sender, eventArgs) {
    this.eventName = eventName2;
    if(eventAction != null) {
        eventAction(sender, eventArgs);
    }
    else {
        alert('There was no function subscribed to the ' + mEventName + ' event!');
    }
  };
};

Then you just need to create an instance of the CustomEvent class somewhere:

 var myEvent = new CustomEvent("my event");

In your page, subscribe to it:

 myEvent.subscribe(function(sender, eventArgs) {
    alert(eventArgs.message);
 });

and in your Ajax call success function, trigger it:

$.ajax({
   type: "GET",
   url: yourUrl:,
   success: function (data) {
       myEvent.fire(null, {message: 'you just witnessed the firing of a custom event called ' + this.eventName + '!'});
   }
});

---

Rather than monitor for changes why not simply encorporate the function into the AJAX update. See the callback section of the docs: http://api.jquery.com/jQuery.ajax/