Question

I’m having a really big problem with live binding in jQuery 1.4. I want to bind a hover event to the div.message elements and fade in the controls. They are hidden by default. This is easy when using .hover(), but doesn’t bind new items that are added via ajax. I’ve tried .live() with no success. It fires the mouseover and mouseout events every time the cursor moves over the various contents of the messages. As you can imagine this makes the controls flicker. I want the the controls to fade in when the mouse is over the message. But I need to bind the effect to new messages as they are loaded. I am apposed to binding hover events as messages are loaded. I would prefer a solution like live, but works exactly like hover.

<div id="messages">
    <div class="message">
        <div class="controls">
            <a href="dosomthing">
                do somthing
            </a>
            <a href="dosomthing">
                do somthing
            </a>
        </div>
        <p>blah blah blah</p>
    </div>
    <div class="message">
        <div class="controls">
        </div>
        <p>blah blah blah</p>
    </div>
    <div class="message">
        <div class="controls">
            <a href="dosomthing">
                do somthing
            </a>
            <a href="dosomthing">
                do somthing
            </a>
        </div>
        <p>blah blah blah</p>
    </div>
</div>

Answer 1

To workaround that, you can use delegate added in version 1.4.2 instead like this:

$("#container").delegate("div", "hover", function(){
    // your code....
});

.delegate()

Description: Attach a handler to one
or more events for all elements that
match the selector, now or in the
future, based on a specific set of
root elements.