我无法让 live() 表现得像悬停()

发布于 2024-09-12 11:49:19 字数 1218 浏览 1 评论 0原文

我在 jQuery 1.4 中的实时绑定方面遇到了一个非常大的问题。我想将悬停事件绑定到 div.message 元素并淡入控件。它们默认是隐藏的。使用 .hover() 时这很容易，但不会绑定通过 ajax 添加的新项目。我尝试过 .live() 但没有成功。每次光标移动到消息的各种内容上时，它都会触发 mouseover 和 mouseout 事件。正如您可以想象的那样，这会使控件闪烁。我希望当鼠标悬停在消息上时控件淡入。但我需要在加载新消息时将效果绑定到它们。我反对在加载消息时绑定悬停事件。我更喜欢像 live 这样的解决方案，但工作原理与悬停完全一样。

<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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

几味少女 2024-09-19 11:49:19

要解决此问题，您可以使用版本中添加的 delegate 1.4.2 像这样：

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

.delegate()
描述：将处理程序附加到一个
或所有元素的更多事件
匹配选择器，现在或在
未来，基于一组特定的
根元素。

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.

回复收藏 0 原文

~没有更多了~