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 のオブジェクトを 2 つ持つべきではありません。

于 2013-07-17T16:19:04.260 に答える
0

次のように、動的に追加されたコンテンツに委任を使用してみてください。

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

ただし、コードにはいくつかの問題があるようです。すぐにわかるカップルです。

#page:not(#newid)これは、"page" という ID を持つ要素が "newid" という ID を持っていないことを確認していますが、これは意味がありません。

ユーザーが複数回クリックすると、完全なコンテキストを知らずに同じ id の複数の要素になる可能性があるようです。おそらく、クラスを使用し、そのクラス名に基づいて委任を使用する必要がありますか?

于 2013-07-17T16:26:02.873 に答える