javascript - 动态创建 div 后显示/隐藏

Question

当鼠标悬停在 start div 上时，我使用此代码来显示/显示 Edit 链接。然而，这个 div 可以动态创建，当它创建时，下面的代码不起作用。

$(".start").hover(
        function() {
            timeclock.utils.displayEdit(this)
        },
        function() {
            timeclock.utils.hideEdit(this)
        });

我尝试了下面的代码，但它不起作用并且看起来错误。如何实现 $(document).on('hover'.....) 来隐藏/显示如上所示的 Edit 链接？

$(document).on("hover", ".start",
        function() {
            timeclock.utils.displayEdit(this)
        },
        function() {
            timeclock.utils.hideEdit(this)
        });

Answer 1

hover() 是绑定(bind) mouseenter 和 mouseout 处理程序的快捷方式。您的第二个示例不起作用，因为 on() 不接受这样的两个函数。您可以使用委托(delegate)事件一次绑定(bind)多个处理程序，如下所示:

$(document).on({
    mouseenter: function () {
        timeclock.utils.displayEdit(this);    
    },
    mouseleave: function () {
        timeclock.utils.hideEdit(this);
    }
}, '.start');

简单示例:http://jsfiddle.net/TRcR9/