jquery mouseover / ماوس يسبب غير متسق

Question

لدي قوائمان قابلة للنقل، واحد يتغير، مع تأثير الماوس على عناصر LI في القائمة القابلة للنزه المتداخلة. مشكلتي هي أن وظائف Mouseover و Mouseout تتم الإشارة إليها بشكل غير متسق عند نقل المستخدم الماوس بسرعة من خلال القائمة عبر عناصر الطفل.

فيما يلي عينة من ما يحدث، يجب عليك سحب جزء في القائمة ثم اسحب 3-4 عناصر Textbox في الجزء لتتمكن من رؤية المشكلة. يمكنك رؤية الأرقام 2 في أعلى اليمين تتبع في / خارج الماوس. لاحظ أنني قد اختبرت فقط موقعي في فايرفوكس حتى الآن.

مثال

رمز مسج الخاص بي:

فيما يلي وظائف Mouseover و Mouseout:

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


$ (". جزء> LI"). يعيش ("Mouseout"، وظيفة () {$ ("# خارج"). HTML (Out1)؛ $ (this) .children (". اختبار"). توقف (). تحريك ({{armact: 0}، 400)؛ Out1 ++؛})؛

$ (". جزء> LI> *"). يعيش ("Mouseover"، وظيفة (حدث) {حدث.Stoppropagation ()؛})؛

$ (". جزء> LI> *"). يعيش ("Mouseout"، وظيفة (حدث) {حدث.Stoppropagation ()؛})؛

قائمة الفرز الأول:

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


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


تحديث: وظيفة (EV، UI) {إذا (! ui.item.is ('. Nochange')) {addnewpane (ui.item)؛ }}، ابدأ: وظيفة (الحدث، UI) {IF (ui.Item.is ('. nechange')) {$ ("# مساحة النموذج الأيسر"). CSS ({'الارتفاع': الارتفاع})؛ $ ("# اليسار الفني - الفضاء"). تحريك ({الارتفاع: "75PX"}، 600، وظيفة () {$ ("مساحة النموذج الأيسر"). CSS ({'الارتفاع': "Auto" })؛})؛ }}، توقف: وظيفة (الحدث، UI) {$ item = ui.item؛ إذا ($ item.is ('. Nochange')) {$ البند .css ({'الارتفاع': '0px'})؛ البند $. ({الارتفاع: "150PX"}، 600، وظيفة () {$ البند .css ({'الارتفاع': 'Auto'})؛})؛ }}، العنصر النائب: '. تسليط الضوء علىPlaceholder'، المؤشر: "نقل"، والعودة: صحيح})؛

$("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

لم أتطلع إلى كل التعليمات البرمجية الخاصة بك ولكني لاحظت أنه عند إضافة [أصناف جديدة] يمكنك أيضا إرفاق الأحداث.

ما قد يكون أفضل هو إذا كنت تستخدم الكلمة الأساسية الحية لأن ذلك سيضمن جميع العناصر مع معرف / فئة معرفية وما إلى ذلك لديك الأحداث المرفقة تلقائيا عند إضافة العنصر.

لذلك إذا قمت بإضافة رمز مثل هذا؛

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

ثم كل مرة تقوم بإضافة عنصر يحتوي على اسم فئة "mypanels"، سيتم إرفاق حدث Mouseover به.

أجد أن هذا أجد أنه يحفظ الكثير من الارتباك في أنه لا يمكنك إضافة أحداث الماوس إلى عنصر ولم أعد أحتاج إليه خصيصا للحصول على رمز لذلك.

غير متأكد إذا قام هذا بإصلاح مشكلتك، لكن من المؤكد أنه من المؤكد أن يرتب الأمر أو قد يصلح أو تعرضه أين المشكلة.

Answer 2

حاول استخدام طريقة التحويم بدلا من طرق الماوس أو ماوس، كما لا ينتشر التحويم الأحداث أسفل مثل الآخرين. شيء مثل

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