jQuery克隆div没有对悬停功能作出反应

我正在使用CMS，所以我没有完全控制以什么方式显示的内容，所以我决定使用下面的代码简单地克隆一个容器。按预期方式创建克隆，但正如您在我的脚本中看到的（第一行），我希望对其有一个悬停效果。在原始版本上，它的工作方式与预期相似，但克隆的部分对悬停功能没有反应，为什么？我怎么能解决它？jQuery克隆div没有对悬停功能作出反应

<script> 
$(document).ready(function(){ 
    $("section.block-bookoblock").hover(function(){ 
    $(".block-bookoblock ul.menu").css("display","block"); 
    },function(){ 
    $(".block-bookoblock ul.menu").css("display","none"); 
    }); 
    document.oncontextmenu = function() {return false;}; 
    $('#page:not(#newid)').mousedown(function(e){ 
    if(e.button == 2) { 
    if ($('#newid').length) { 
    $('#newid').css({ "display": 'block'}); 
    $('#newid').css({ "top": e.pageY +'px'}); 
    $('#newid').css({ "left": e.pageX +'px'}); 
     } else { 
    var $div = $('#block-bookoblock-book-outline').clone().attr('id','newid'); 
    $('body').append($div); 
     $('#newid').css({ "top": e.pageY +'px'}); 
     $('#newid').css({ "left": e.pageX +'px'}); 
     $('#newid').css({ "position": 'absolute'}); 
     return false; 
    } 
    } 
    if(e.button == 0) { 
    $('#newid').css({ "display": 'none'}); 
    } 
    return true; 
    }); 
    $("#newid").hover(function(){ 
    $(".block-bookoblock ul.menu").css("display","block"); 
    },function(){ 
    $(".block-bookoblock ul.menu").css("display","none"); 
    }); 
}); 
</script>

来源

2013-07-17 Tobias Kess

''#page：not（#newid）''你想用这个做什么？ – smerny

因此，在这个div内的左击不会关闭新创建的菜单块 –

您的悬停事件仅适用于调用时的#newid元素。要把它也适用于未来的对象，使用符号

$("#newid").on('hover', function(){ ...

当然，你不应该有相同ID的两个对象开始。

来源

2013-07-17 16:19:04 Brian

'hover（）'实际上是'on（）'的2参数版本的快捷方式，所以如果不使用委托，这应该没有什么区别。 – smerny

如果我改变'$（“section.block-bookoblock”）.hover（function（）{block-bookoblock ul.menu）.css（“display”，“block”）; }， function（）{（“。block-bookoblock ul.menu”）。css（“display”，“none”）; }）;' 至 '$（“section.block-bookoblock”）（'hover'，function（）{（“。block-bookoblock ul.menu”）.css（“display”，“block”）; }，function（）{“block-bookoblock ul .menu“）.css（”display“，”none“）; }）;' –

...悬停事件不会被触发。 –

尝试使用代表团的动态添加的内容，如：

$("body").on("hover", "#newid", function() { ... });

似乎有一些问题与您的代码虽然，一对夫妇我看到连忙道：

#page:not(#newid)这是检查的ID为“page”的元素不具有无意义的“newid”的ID。

它看起来像你最终可能会有多个相同的ID元素，如果用户多次点击，不知道你的完整的上下文，也许你应该使用一个类，并使用基于该类名的委派？

来源

2013-07-17 16:26:02 smerny

#page：not（#newid）充当选择器，用于在newid div –

以外的所有点击。您的代码建议也不会对悬停在原始或克隆的div上 –

jQuery克隆div没有对悬停功能作出反应

回答

相关问题