JQuery mouseover / mouseout activación inconsistente

Question

Tengo dos listas que se pueden ordenar, siendo uno anidados, con un ratón sobre efecto sobre los elementos LI de la lista se puede ordenar anidada. Mi problema es que las funciones de desplazamiento de ratón y mouseout están siendo llamados inconsistente cuando un usuario mueve el ratón rápidamente por la lista sobre los elementos secundarios.

Este es un ejemplo de lo que sucede, usted tiene que arrastrar un panel en la lista y luego arrastrar 3-4 elementos de cuadro de texto en el panel para poder ver el problema. Se puede ver los 2 números en la parte superior derecha mantienen un registro de la entrada / salida del ratón. Tenga en cuenta que sólo he probado mi sitio en Firefox hasta el momento.

ejemplo

Mi código jQuery:

Estas son las funciones de desplazamiento de ratón y mouseout:

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

La primera lista se puede ordenar:

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

Mi función de añadido de las listas que se pueden ordenar anidados:

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


};

Gracias por cualquier ayuda.

Answer 1

No he mirado todo el código, pero me di cuenta de que al agregar nuevos paneles [] también adjuntar eventos.

Lo que podría ser mejor es si se utiliza la palabra clave en vivo ya que esto garantizará todos los elementos con un ID / clase dada etc han unido los eventos de forma automática cuando se agrega el elemento.

Así que si se agrega un código como éste;

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

A continuación, cada vez que se agrega un elemento que contiene un nombre de clase de '' MyPanels, el evento mouseover se adjuntará a la misma.

Este encuentro ahorra una gran cantidad de confusión en que nunca se puede añadir dos eventos de ratón a un elemento y yo también ya no tienen que específicamente código para ello.

No está seguro si esto soluciona el problema, pero sería sin duda las cosas ordenadas y hasta puede fijar o exponga donde el tema es.

Answer 2

Trate de usar el método de la libración en lugar de los métodos de desplazamiento de ratón o mouseout, como estacionario no se propaga a los eventos abajo como hacen los demás. Algo así como

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