Question

I have a div element, which is loaded via AJAX. Once it’s loaded, I want to highlight the text in it (the usual process, click your mouse and drag to highlight).

But since DOM is already loaded, the mouse related events are not registered for these new div’s, right?

If I have a div like this

<div id="parent"></div>

And after jQuery “get” call, it becomes

<div id="parent">
  <div id="child">Hello this content is loaded via AJAX</div>
</div>

How do I rebind the div “#child” to mouse-related events? And exactly which events do I rebind them to?

Answer 1

You’re looking for .live().

$("#child").live({
    click: function() {
        // do stuff
    },
    mouseover: function() {
        // do stuff
    },
    mouseout: function() {
        // do stuff
    }
});

Bind as many events as you like!