Question

I would like to catch the event when the innerHTML of an element changes due to “ajaxing”.

I mean something like this:

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

Thanks for help!

Answer 1

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