jQuery detect instances after Dom update

From the title this seems simple, but it's not as simple as the title.

I'm trying to 开发者_如何学编程detect instances of a div on a page with something like .live however live can only be applied to events such as click, mousedown, etc, there is no event such as domupdate or something.

Now let me explain what I'm doing. when I run the plugin it checks the dom for all instances of a div class (so for this example: c_talk is the class). Then for each of those returned elements it performs actions. I need this script for work for all divs on the page with the class c_talk even after a dom update via ajax or other means.

So when I run jQuery('div.c_talk').c_talk(); it should detect all instances in dom no matter what.

Here is the code so far

(function($){
$.fn.c_talk = function () {
    var fn = $.fn.c_talk;
    var opt = {
        divliveprev : 'view_prev',
        divlivesend : 'send'
    }
    // test function
    fn.activateLive = function($this) {

    }

    // do for each element in dom
    return this.each(function(e){

        var $this = jQuery(this);

        if(!jQuery(this).data('init')) {
            // on page set it
            jQuery(this).data('init', '1');

        }else {
            // is already on page
            alert($this.size());
        }
        return false;
    });

};
})(jQuery);

jQuery(document).ready(function(){

    jQuery('div.c_talk').c_talk();
});

More Info for those that don't understand: Basically it's a facebook like comment box. You have a div, that div contains comments, a view previous button, and a post button, I will need to do things for each instance of comment box. The key is I have to be able to detect new comment boxes being appended since my site runs on 100% ajax. This script would work fine if I just needed to detect comment boxes onload. It's not that simple in my case though, since the script has to be able to detect new comment boxes on the fly (via ajax).. Any ideas, my website is kalluna.com if it helps you understand this better.

You could track HTML changes in a similar way that the jQuery livequery plugin does. The livequery plugin wraps all of the jQuery DOM manipulation methods and when any of them are called, the wrapper method does something special (in your case call the c_talk function on all divs with the c_talk class) and then proxies back to the original function.

$.each('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', function(i, funcName) {

   // Short-circuit if the method doesn't exist
   if (!$.fn[funcName]) return;

   // Save a reference to the original method
   var old = $.fn[funcName];

   // Create a new method
   $.fn[funcName] = function() {

      // Call the original method
      var r = old.apply(this, arguments);

      //rerun the original function call
      $('div.c_talk').c_talk();

      // Return the original methods result
      return r;
   }
});

Displaying change of content through parent

You would need to poll for that I believe.

// Consider a function to make this DRY - getDomLength()
var domItems  = $(document).find('*').length;

setInterval(function() {
    if (domItems != $(document).find('*').length) {
         domChanged();
    }
    domItems = $(document).find('*').length; 

}, 100);

jsFiddle.

Polling for changes is usually the only way something is done if no other better way is possible.

Remember, you can tell where an event originated from using this code (click() for example)...

$(document).click(function(event) {
   var element = event.target;
});