Непоследовательный запуск наведения курсора мыши на Jquery / mouseout

Question

У меня есть два сортируемых списка, один из которых вложенный, с наведением курсора мыши на элементы li вложенного сортируемого списка.Моя проблема заключается в том, что функции наведения курсора мыши и 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", функция(){
    $("#out").html(out1);$(this).children(".test").stop().animate({непрозрачность:0},400);выход1++;});

$(".pane > li > *").live("наведение курсора мыши", функция (событие){
    event.stopPropagation();});

$(".pane > li > *").live("наведение курсора мыши", функция (событие){
    event.stopPropagation();});

Первый сортируемый список:

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


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


Обновить:функция (ev, пользовательский интерфейс){
  if (!ui.item.is ('.noChange')){
   Добавить новую панель (пользовательский интерфейс.item);} 
}, 
 начать:функция (событие, пользовательский интерфейс){
  if (ui.item.is ('.noChange')){
   $("#пробел влевойформе").css({'высота' :высота});$("#пробел в левой форме").анимировать({высота:"75px"}, 600, функция(){
    $("#пробел влевой форме").css({'height' :'авто'});});} 
}, 
 прекратить:функция (событие, пользовательский интерфейс){
  $item = пользовательский интерфейс.item;if ($item.is ('.noChange')){
   $item.css({'высота' :'0 пикселей'});$item.анимировать({высота:"150px"}, 600, функция(){
    $item.css({'высота' :'авто'});});} 
}, 
 заполнитель:'.заполнитель-выделить', 
 курсор:"переместить", 
 вернуться:верно
    });

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


};

Спасибо за любую помощь.

Answer 1

Я не просматривал весь ваш код, но я заметил, что когда вы добавляете новые [панели], вы также прикрепляете события.

Что может быть лучше, так это если вы используете ключевое слово live, поскольку это гарантирует, что ко всем элементам с заданным идентификатором / классом и т.д. Будут автоматически прикреплены события при добавлении элемента.

Итак, если вы добавите код, подобный этому;

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

Затем каждый раз, когда вы добавляете элемент, содержащий имя класса 'MyPanels', к нему будет привязано событие наведения курсора мыши.

Я нахожу, что это избавляет от большой путаницы, поскольку вы никогда не сможете добавить два события мыши к элементу, и мне также больше не нужно специально кодировать для этого.

Не уверен, исправит ли это вашу проблему, но это, безусловно, наведет порядок и, возможно, исправит или выявит, в чем проблема.

Answer 2

Попробуйте использовать метод наведения курсора вместо методов наведения курсора мыши или mouseout, поскольку наведение курсора не приводит к распространению событий вниз, как это делают другие.Что - то вроде

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