Jquery mouseover / mouseout срабатывает непоследовательно

Question

У меня есть два сортируемых списка, один из которых является вложенным, с наведением мыши на элементы li вложенного сортируемого списка. Моя проблема в том, что функции mouseover и mouseout вызываются непоследовательно, когда пользователь быстро перемещает мышь по списку над дочерними элементами.

Вот пример того, что происходит: вам нужно перетащить панель в список, а затем перетащить 3-4 элемента текстового поля в панель, чтобы увидеть проблему. Вы можете видеть, что 2 числа в верхнем правом углу отслеживают вход / выход мыши. Примечание. До сих пор я проверял только свой сайт в Firefox.

пример

Мой код JQuery:

Вот функции наведения и наведения мыши:

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

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

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

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

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

    var counter = 0;
    var height="";
    var in1 =0;
    var out1=0;</p>

<pre><code>$("#left-form-space").sortable({

обновление: функция (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 (событие, пользовательский интерфейс) { $ item = ui.item; if ($ item.is ('. noChange')) { $ item.css ({'height': '0px'}); $ item.animate ({height: "150px"}, 600, function () { $ item.css ({'height': 'auto'}); }); } }, заполнитель: «.placeholder-highlight», курсор: «двигаться», вернуться: правда });

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

Моя функция для добавления вложенных сортируемых списков:

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

<pre><code>$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', к нему будет прикреплено событие mouseover.

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

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

Answer 2

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

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