Question

我正在使用CMS，因此我无法完全控制以哪种方式显示的内容，因此我决定使用下面的代码简单地克隆容器。克隆按预期创建，但正如您在我的脚本（第一行）中看到的那样，我想对其进行悬停效果。在原来它的工作方式与预期的一样，但克隆部分对悬停功能没有反应，为什么会这样？我怎么能绕过它？

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

Answer 1

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

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

当然，您不应该有两个具有相同ID的对象。

Answer 2

尝试使用委托来动态添加内容，例如：

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

你的代码似乎有几个问题，我很快就看到了一对：

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

如果用户多次点击，你可能最终得到几个相同id的元素，而不知道你的完整上下文，也许你应该使用一个类并使用基于该类名的委托？

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

2 个答案: