ما الفرق بين jQuery.live() و.on()




jquery-1.7 (6)

أرى أن هناك طريقة جديدة .on() في jQuery 1.7 التي تحل محل .live() في الإصدارات السابقة.

أنا مهتم بمعرفة الفرق بينهما وما هي فوائد استخدام هذه الطريقة الجديدة.


أحد الاختلافات التي .live() الأشخاص عند الانتقال من .live() إلى .on() هو أن معلمات .on() مختلفة قليلاً عند إضافة أحداث الربط إلى العناصر بشكل ديناميكي إلى DOM.

في ما يلي مثال على الصيغة التي استخدمناها مع طريقة .live() :

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

الآن مع .live() يجري إهمال في jQuery الإصدار 1.7 وإزالتها في الإصدار 1.9 ، يجب عليك استخدام الأسلوب .on() . إليك مثال مكافئ باستخدام طريقة .on() :

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

يرجى ملاحظة أننا .on() مقابل المستند بدلاً من الزر نفسه . نحدد محدد العنصر الذي نستمع إليه في المعلمة الثانية.

في المثال أعلاه ، أتصل .on() في المستند ، ولكن ستحصل على أداء أفضل إذا كنت تستخدم عنصرًا أقرب إلى المحدد. أي عنصر السلف سيعمل طالما أنه موجود على الصفحة قبل استدعاء .on() .

هذا موضح هنا في التوثيق ولكن من السهل أن تفوتك.


أنا مؤلف إضافة Chrome "تعليق الحفظ" الذي يستخدم jQuery ، والآخر الذي استخدم .live() . طريقة عمل التمديد هي عن طريق إرفاق المستمع بجميع النصوص باستخدامه. live() - هذا يعمل بشكل جيد حيث كلما تم تغيير المستند فإنه لا يزال يعلق المستمع على كافة النصوص الجديدة.

انتقلت إلى .on() ولكنها لا تعمل كذلك. لا تعلق المستمع كلما تغيرت الوثيقة - لذلك لقد عادت إلى استخدام .live() . هذا خطأ أعتقد في .on() . فقط كن حذرا حول هذا أعتقد.


لدي متطلب لتحديد حدث مغلق للمتصفح. بعد القيام بالأبحاث أقوم به بعد استخدام jQuery 1.8.3

  1. قم بتشغيل إشارة باستخدام jQuery التالية عند النقر فوق الارتباط التشعبي

    $ ("a"). live ("click"، function () {cleanSession = false؛})؛

  2. قم بتشغيل إشارة باستخدام jQuery التالية عندما يتم النقر فوق أي زر إدخال

$ ("input [type = submit]"). live ('click'، function () {alert ('input button clicked')؛ cleanSession = false؛})؛

  1. قم بتشغيل إشارة باستخدام jQuery التالية عندما يحدث أي إرسال للنموذج

$ ("form"). live ("submit"، function () {cleanSession = false؛})؛

الشيء المهم الآن ... حل لي يعمل فقط إذا كنت تستخدم. العيش بدلا من ذلك. إذا استخدمت .on ، فسيتم إطلاق الحدث بعد إرسال النموذج وبعد فوات الأوان. عدة مرات يتم إرسال نماذجي باستخدام استدعاء جافا سكريبت (document.form.submit)

لذلك هناك فرق رئيسي بين .live و .on. إذا كنت تستخدم. عش إطلاق الأحداث الخاصة بك على الفور ولكن إذا قمت بالتبديل إلى. لا يتم إطلاقها في الوقت المحدد


لمزيد من المعلومات التحقق من ذلك .. docs و .on()

يتم استخدام طريقة .live () عند التعامل مع المحتوى الديناميكي للمحتويات ... كما قمت بإنشائها على برنامج يضيف علامة تبويب عند تغيير قيمة Jquery Slider وأريد إرفاق وظيفة زر الإغلاق مع كل علامات التبويب والتي سوف تولد ... رمز لقد حاولت هو ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

وهو يعمل بشكل رائع كثيرًا ...


تعليمي جيد عن الفرق بين في مقابل العيش

اقتبس من الرابط أعلاه

ما هو الخطأ في .live ()

لم يعد استخدام أسلوب .live () مستحسنًا نظرًا لأن الإصدارات الأحدث من jQuery تقدم أساليب أفضل لا تحتوي على عيوبها. على وجه الخصوص ، تنشأ المشكلات التالية مع استخدام .live ():

  1. يحاول jQuery استرجاع العناصر المحددة بواسطة المحدد قبل استدعاء طريقة .live () ، والتي قد تستغرق وقتًا طويلاً في المستندات الكبيرة.
  2. أساليب التسلسل غير مدعومة. على سبيل المثال ، $ ("a"). find (". offsite، .external"). live (…)؛ غير صالح ولا يعمل كما هو متوقع.
  3. بما أن جميع أحداث .live () مرفقة بعنصر الوثيقة ، فإن الأحداث تأخذ أطول وأبطأ مسار ممكن قبل أن يتم التعامل معها.
  4. استدعاء event.stopPropagation () في معالج الأحداث غير فعال في إيقاف معالجات الأحداث المرفقة أقل في المستند؛ لقد انتشر الحدث بالفعل إلى المستند.
  5. تتفاعل طريقة .live () مع طرق الحدث الأخرى بطرق قد تكون مفاجئة ، على سبيل المثال ، $ (document) .unbind ("click") يزيل جميع معالجات النقر المرفقة بأي مكالمة إلى .live ()!

.live()

يتم استخدام هذه الطريقة لإرفاق معالج أحداث لكافة العناصر التي تطابق المحدد الحالي ، الآن وفي المستقبل.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

و

.on()

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

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});






jquery-1.7