JQuery mouseover / mouseout desencadeamento de forma inconsistente

Question

Eu tenho duas listas classificáveis, que está sendo aninhados, com um mouse sobre efeito sobre os elementos li da lista de classificáveis ??aninhada. Meu problema é que as funções mouseover e mouseout estão sendo chamados de forma inconsistente quando um usuário move o mouse rapidamente através da lista ao longo dos elementos filhos.

Aqui está uma amostra do que está acontecendo, você tem que arrastar um painel na lista e arraste 3-4 itens de caixa de texto no painel para ser capaz de ver o problema. Você pode ver os 2 números no canto superior direito estão mantendo o controle da saída no / do mouse. Nota Só testei meu site no Firefox até agora.

exemplo

Meu código jQuery:

Aqui estão as funções de mouseover e 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();
});

A primeira lista de classificáveis:

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

A minha função para adicionar as listas classificáveis ??aninhados:

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


};

Obrigado por qualquer ajuda.

Answer 1

Eu não olhei para todo o seu código, mas eu notei que quando você adiciona novos [painéis] você também anexar eventos.

O que pode ser melhor é se você usar a palavra-chave ao vivo como este irá garantir que todos os elementos com um ID de dado / aula etc ter os eventos ligados automaticamente quando você adicionar o elemento.

Então, se você adicionar código como este;

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

Então toda vez que você adicionar um elemento que contém um nome de classe de 'MyPanels', o evento mouseover será anexado a ele.

Este achado eu salva um monte de confusão em que você nunca pode adicionar dois eventos de mouse para um elemento e eu também já não há necessidade de especificamente código para ele.

Não tem certeza se isso corrige o problema, mas ele faria coisas certamente arrumar e pode corrigir ou exponha onde é o problema.

Answer 2

Tente usar o método de foco em vez dos métodos mouseover ou mouseout, como pairar não propagar os eventos para baixo como os outros fazem. Algo como

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