JQuery Mouseover / mouseout Auslösung inkonsistent

Question

Ich habe zwei sortierbare Listen, eine verschachtelt werden, mit einer Maus über Auswirkungen auf die li Elemente der verschachtelten sortierbare Liste. Mein Problem ist, dass die Mouseover- und mouseout Funktionen inkonsistent sind aufgerufen, wenn ein Benutzer die Maus schnell durch die Liste über die untergeordneten Elemente bewegt.

Hier ist ein Beispiel von dem, was passiert ist, haben Sie eine Scheibe in die Liste zu ziehen und dann 3-4 Textbox Elemente in die Scheibe ziehen zu können, um das Problem zu sehen. Sie können die zwei Zahlen in der oberen rechten sehen Spur der in halten / aus der Maus. Hinweis Ich habe nur meine Seite in Firefox bisher getestet.

Beispiel

Mein jQuery-Code:

Hier sind die Mouseover- und mouseout Funktionen:

$(".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();
});

Die erste sortierbare Liste:

    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();

Meine Funktion zum Hinzufügen der verschachtelten sortierbare Listen:

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');
});


};

Vielen Dank für jede Hilfe.

Answer 1

Ich habe nicht auf den gesamten Code aussah, aber ich habe bemerkt, dass, wenn Sie neue [Scheiben] fügen Sie auch Ereignisse anhängen.

Was könnte besser sein, wenn Sie das Live-Schlüsselwort verwenden, da diese alle Elemente mit einer bestimmten id / Klasse gewährleisten usw. haben die Ereignisse angebracht automatisch, wenn Sie das Element hinzufügen.

Wenn Sie also Code wie folgt hinzuzufügen;

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

Dann jedes Mal wenn Sie ein Element hinzufügen, das einen Klassennamen ‚MyPanels‘ enthält, wird das Ereignis Mouseover zu ihm angebracht werden.

Das ich spart eine Menge Verwirrung finden, dass man nie zu einem Element zwei Mausereignisse hinzufügen und ich auch nicht mehr für sie speziell Code benötigen.

Unsicher, ob dies Ihr Problem behebt, aber es wäre sicherlich ordentlich Dinge und reparieren kann oder freizulegen, wo das Problem ist.

Answer 2

Versuchen Sie, die Hover-Methode anstelle der Mouseover oder mouseout Methoden verwenden, da schweben nicht die Ereignisse propagieren nach unten wie die anderen tun. So etwas wie

$('.pane').hover(function() {
  // Mouseover code here
}, function() {
  // Mouseout code here
}