title: How to get .ready to be called each time an element is loaded in jQuery?
body: <p>I'd like to have an event that fires every time a Dom element is initialized, like so:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="data"&gt;data!&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="clickme"&gt;Click me!&lt;/div&gt;​
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(function() {
      var i = 0;
      $('#clickme').click(function() {
          $('#container').html('&lt;div id="data"&gt;data '+i+'&lt;/div&gt;');
          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!');
      });
  });
  </code></pre>
  
  <hr>
  
  <p>I've tried:</p>
  
  <pre><code>// doesn't work
  $('#data').live('ready', function() {
      alert('element data ready (live)');
  });
  </code></pre>
  
  <p><strong>Edit:</strong> I am interested in doing that for elements that are inserted by ajax. For example:</p>
  
  <pre><code>$.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
  });
  </code></pre>
  
  <p>fiddle here: <a href="http://jsfiddle.net/nf8CP/" rel="nofollow">http://jsfiddle.net/nf8CP/</a></p>