Does JQuery's Html() Remove All Data Attached To Elements That Are Replaced?

I'm displaying a tabbed interface with the help of jQuery. When you click a tab, a ajax call will replace all html from a $('.content') element with new html, using something like

Solution 1:

Yes. They will be removed. You can use the live event to attach to elements that dont exist yet.

 $(".myElementClass").live("click", function (e) {
         e.preventDefault();
         //do stuff
});

In this case, this function will always be called on myElement no matter when it is injected into the DOM.

Solution 2:

All HTML inside of your selector is replaced with the parameter you pass in, implying it is completely removed from the DOM. Meaning if you have:

<div id="mine">
  <ul>
    <li>One thing</li>
  </ul>
</div>

And I do a call as such:

$('div#mine').html("hey");

My HTML will then be:

<div id="mine">
  hey
</div>

As you can see the is completely removed and all its bound events mean nothing. If you use the jQuery.live() binding instead however, then elements that don't yet exist can have events associated with them. Meaning if you add some elements to the DOM then they events will still work, without you have to rebind if you add more, or replace them.

Solution 3:

**.live** events are binded at the document level , read the following document which is really useful

http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm