How to get .ready to be called each time an element is loaded in jQuery?

Question

I'd like to have an event that fires every time a Dom element is initialized, like so:

HTML

<div id="container">
    <div id="data">data!</div>
</div>

<div id="clickme">Click me!</div>​

Javascript

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        i++;
    });

    // this event gets called only the first time #data element is ready
    // I want it to be called each time #data comes into being
    $('#data').ready(function() {
        alert('element data ready!');
    });
});

---

I've tried:

// doesn't work
$('#data').live('ready', function() {
    alert('element data ready (live)');
});

Edit: I am interested in doing that for elements that are inserted by ajax. For example:

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);
  });

  // this function operates on elements returned by the ajax call, so they are not available at this point.
  myFunction();

  // so I'd better call myFunction() when the ajax data is inserted
});

fiddle here: http://jsfiddle.net/nf8CP/

Answer 1

For your updated question, just move your function to the callback, and you're done.

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);

      myFunction(); // Call it right here.
  });

 // myFunction();  // Not here!!!

});

---

There are DOM Mutation events, but I believe they're deprecated, and don't have full browser support.

There's also the livequery plugin, but it's really overkill.

The .ready() handler does not handle loading events for individual elements. Only for the DOM loaded events. These three examples all have the same behavior:

• $(document).ready(...
• $('document').ready(...
• $("#data").ready(...
• $().ready(...

There is no difference. The argument passed to $ is ignored.

The proper solution is to invoke the code you want when you create the element.

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        dataReady();
        i++;
    });

    function dataReady() {
        alert('element data ready!');
    }
});

Also, given your example, a better and less destructive solution would be to simply modify the text in #data instead of destroying the element with .html().

Answer 2

ready (or more accurately DOMContentLoaded) only fires once, when the page has been fully parsed. There is no clean way to do what you're wanting here, so you're going to need to go with manual installation of your event handlers. (There are the DOM mutation events, but those are so noisy, your page will eat itself trying to handle them, and it's generally a bad idea unless you really know what you're doing).

However, I suspect that what you really want here is event delegation. You need to install the event on #container rather than #data, because when your ready function is called, the existing #data node is removed from the DOM!

For example:

$('#container').on('click', '#data', function() {
  alert('#data element was clicked!');
});

What this does is install a handler on #container (which never changes), which listens for click events originating (or bubbling through) a child element with the selector #data. This means that even if you keep replacing the contents of #container, you never have to install new event handlers on its contents.

Answer 3

You can use DOMNodeInserted:

$(document).on('DOMNodeInserted', function() {
    alert('element data ready (live)');
});

It will be fired whenever a node is added to the DOM.

You can also filter what nodes trigger this event like so:

$(document).on('DOMNodeInserted', '#data', function() {
    ...
}

Now it will only trigger when nodes with the ID of data are added.

Answer 4

why don't you put your .ready inside of your button click, so you can see if it is ready every time you click it:

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data ' + i + '</div>');
        i++;
        $('#data').ready(function() {
            alert('element data ready!');
        });
    });
});​