1

2つのソート可能なリストがあります。1つはネストされており、ネストされたソート可能なリストのli要素にマウスオーバー効果があります。私の問題は、ユーザーが子要素のリストをすばやくマウスで移動すると、mouseover関数とmouseout関数が一貫して呼び出されないことです。

何が起こっているかのサンプルを次に示します。問題を確認するには、ペインをリストにドラッグしてから、3〜4個のテキストボックスアイテムをペインにドラッグする必要があります。右上の2つの数字が、マウスの出入りを追跡していることがわかります。これまでのところ、Firefoxで自分のサイトをテストしただけであることに注意してください。

例

私のjqueryコード：

マウスオーバーとマウスアウトの機能は次のとおりです。 


$(".pane > li").live("mouseover", function(){
    $("#in").html(in1);
    $(this).children(".test").stop().animate({opacity: 1},400);
    in1++;
});



$(".pane > li").live("mouseout", function(){
    $("#out").html(out1);
    $(this).children(".test").stop().animate({opacity: 0},400);
    out1++;
});



$(".pane > li > *").live("mouseover", function(event){
    event.stopPropagation();
});



$(".pane > li > *").live("mouseout", function(event){
    event.stopPropagation();
});

最初の並べ替え可能なリスト： 


    var counter = 0;
    var height="";
    var in1 =0;
    var out1=0;



$("#left-form-space").sortable({




update: function(ev, ui){
  if (!ui.item.is('.noChange')){
   addNewPane(ui.item);
  }
 },
 start: function(event, ui){
  if (ui.item.is('.noChange')){
   $("#left-form-space").css({'height' : height});
   $("#left-form-space").animate({height: "75px"}, 600, function(){
    $("#left-form-space").css({'height' : 'auto'});
   });
  }
 },
 stop: function(event, ui){
  $item = ui.item;
  if ($item.is('.noChange')){
   $item.css({'height' : '0px'});
   $item.animate({height: "150px"}, 600, function(){
    $item.css({'height' : 'auto'});
   });
  }
 },
 placeholder: '.placeholder-highlight',
 cursor: 'move',
 revert: true
    });



$("ul, li").disableSelection();

ネストされたソート可能なリストを追加するための私の関数：


function addNewPane($item){
    counter++;
    var newID = "pane_" + counter;
    $item.attr("id", newID);



$item.html('').animate({height: "150px"}, 600, function(){
    $item.css({'height' : 'auto'});
    $item.html('<fieldset class="sortable-pane"><div class="pane-nav"><a href="link/to/recycle/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-close">Delete image</a></div><ul class="pane"></ul></fieldset>');
    $("#" + newID + " > fieldset").hide().fadeIn('slow');
    $(".pane").sortable({
        placeholder: 'ui-state-highlight',
        update: function (event, ui){
            if (!ui.item.is('.noChange')){
                if (ui.item.is('.textbox')){
                    $(ui.item).html('<div class="test ui-corner-tl ui-corner-bl">test</div><input class="label" value="First Name:"/><input name="input1" id="input1" type="text" /><div id="spacer"></div>');

                }
                if (ui.item.is('.header')){
                    $(ui.item).html('<div id="element2" class="element header"><h1>Contact Information</h1></div>');
                }
            }
        },
        cursor: 'move',
        revert: true
    });

    var newFormHeight = $("#left-form-space").height() + "px";
    height=newFormHeight;
    $item.addClass('noChange');
});




};

助けてくれてありがとう。

4

2 に答える 2

1

すべてのコードを調べたわけではありませんが、新しい[ペイン]を追加するとイベントも添付されることに気付きました。

liveキーワードを使用すると、特定のID /クラスなどのすべての要素に、要素を追加したときにイベントが自動的にアタッチされるようになるため、より良い方法があります。

したがって、このようなコードを追加すると、

$('.MyPanels').live("mouseover", function() { //do stuff });

その後、「MyPanels」というクラス名を含む要素を追加するたびに、mouseoverイベントがそれにアタッチされます。

これにより、要素に2つのマウスイベントを追加することはできず、そのために特別にコーディングする必要がなくなるという点で、多くの混乱を避けることができます。

これで問題が解決するかどうかはわかりませんが、問題が解決され、問題がどこにあるかが明らかになる可能性があります。

于 2009-11-11T00:17:39.717 に答える
0

ホバーは他の方法のようにイベントを伝播しないため、マウスオーバーまたはマウスアウト メソッドの代わりにホバー メソッドを使用してみてください。何かのようなもの

$('.pane').hover(function() {
  // Mouseover code here
}, function() {
  // Mouseout code here
}
于 2014-12-12T21:50:15.850 に答える