2

Edit当鼠标悬停在startdiv上时，我使用此代码显示/显示链接。然而，这个 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)
        });
4

4 回答 4

4

hover()是绑定mouseenter和mouseout处理程序的快捷方式。你的第二个例子不起作用，因为on()没有像这样的两个函数。您可以使用如下委托事件一次绑定多个处理程序：

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

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

于 2013-08-23T18:19:50.593 回答
0

你的语法有点不对劲。这是一个带有工作示例的jsfiddle ：

HTML：

<div id="container"></div>

CSS：

#edit { display: none; }

Javascript：

$(function() {
    $(document).on(
        {
            mouseenter: function() 
            {
                $('#edit').show();
            },
            mouseleave: function()
            {
                $('#edit').hide();
            }
        },
        '.start'
    );   

    $('#container').prepend('<div class="start">Mouse over me <a id="edit" href="#">edit</a></div>');
});
于 2013-08-23T18:22:32.267 回答
0

你的语法有点不对劲。您可以使用普通对象同时附加多个事件处理程序。

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

我在这里创建了一个 Codepen 示例：http: //cdpn.io/dDewi

于 2013-08-23T18:15:50.413 回答
0

您的代码中有 2 个错误。1. 你应该使用 $(this) 而不是 this。这两者是有区别的。2. 每当创建新的 div 时，您必须再次绑定悬停。

于 2013-08-23T18:18:14.823 回答