0

我正在使用 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>
4

2 回答 2

0

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

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

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

于 2013-07-17T16:19:04.260 回答
0

Try using delegation for your dynamically added content, like this:

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

There seems to be several problems with your code though, a couple I see quickly:

#page:not(#newid) this is checking that the element with the ID of "page" does not have the ID of "newid" which doesn't make sense.

it looks like you could end up with several elements of the same id if the user clicks multiple times, without knowing your full context, perhaps you should be using a class and using delegation based on that class name?

于 2013-07-17T16:26:02.873 回答