Question

当鼠标悬停在Edit div上时，我使用此代码显示/显示start链接。然而，这个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()是绑定mouseenter和mouseout处理程序的快捷方式。你的第二个例子不起作用，因为on()没有这样的两个函数。您可以使用如下的委托事件一次绑定多个处理程序：

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

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

Answer 2

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

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

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

Answer 3

您的代码中有2个错误。 1.你应该使用$（this）而不是这个。这两者之间有所不同。 2.每当创建一个新的div时，你必须再次绑定悬停。

Answer 4

你的语法有点偏。这是一个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>');
});

动态创建div后显示/隐藏

4 个答案: