Jquery Event onChange for Div

I have a page with the following two divs:

<div id="searchResults">
</div>

<div class="postSearchOptions" style="display: none;">
</div>

Is there any way that I can make the "postSearchOptions" div appear when the "searchResults" div is updated by an AJAX call? I don't control the AJAX calls and I want to detect any change i开发者_如何转开发n the "searchResults" div.

I tried writing the following JQuery code, but then realized that it requires Jquery 1.4 and I only have 1.3:

$("#searchResults").live("change", function() {
    $(".postSearchOptions").css("display", "inline");
});

Is there any way to catch the event of the searchResults div changing using either standard JavaScript or Jquery 1.3? Thanks!

If the AJAX calls are made using jQuery, you could call handle the global ajaxComplete event and run your code there.

I don't think the onchange event will fire if you are programatically changing the innerHTML. Why don't you just show the Post Search options upon receiving those change i.e. why don't you include it as the last line in your ajax success method.

HTH

You could use setInterval to watch it, but as others have said it would be nicer to detect the change in the ajax callback. Here's an sketch of what a plugin would look like to "watch" a node, like you're trying to do with live:

jQuery.fn.watch = function() {
  this.each(function() {
    var original = $(this).html();
    setInterval(function() {
       var newHtml = $(this).html();
       if (newHtml != original) {
         $(this).trigger('change');
         original = newHtml;
       }

    }, 500);

  } );
}

to working, do....

jQuery.fn.watch = function() {
      this.each(function() {
        var obj = $(this);
        var original = $(this).html();
        setInterval(function() {
           var newHtml = $(obj).html();
           if (newHtml != original) {   
            $(obj).trigger('change');
            original = newHtml;
           }

        }, 500);

       } );
}