ما هو الفرق بين الربط والأساليب الحية في جيس؟
https://stackoverflow.com/questions/937039
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا فضولي لمعرفة الاختلافات بين الربط والوظائف الحية.
لي يبدو أنهم متطابقون تقريبا.
انا افرا فوائد أساليب الحية / الربط, ، لكنها لم تخبرني عن الاختلافات ...
شكرا!
المحلول
.Bind () مرفق الأحداث للعناصر الموجودة أو تطابق المحدد في وقت إجراء المكالمة. أي عناصر تم إنشاؤها بعد ذلك أو تلك المباراة المضي قدما لأن الفصل قد تم تغييره، فلن يطلق النار على الحدث المحدد.
.Live () يعمل عناصر مطابقة الحالية والمستقبلية. قبل jQuery 1.4 هذا يقتصر على الأحداث التالية: انقر فوق، dblclick mousedown، mouseup، mousemove، mouseover، mouseout، keydown، keyup، keyup
نصائح أخرى
بالمختصر: .bind() سيتم تطبيق فقط على العناصر التي حددتها حاليا في كائن JQuery الخاص بك. .live() سوف تنطبق على جميع عناصر المطابقة الحالية، وكذلك أي قد تضيف في المستقبل.
الفرق الأساسي بينهما هو ذلك live() يستفاد من فقاعة الحدث. وبعد وهذا هو، عند النقر فوق زر، قد يكون هذا الزر في <p>, ، في <div>, ، في <body> جزء؛ لذلك ساري المفعول، فأنت في الواقع النقر فوق كل هذه العناصر في نفس الوقت.
live() يعمل عن طريق إرفاق معالج الحدث الخاص بك إلى وثيقة, ، وليس إلى جزء. وبعد عند النقر فوق هذا الزر، كما هو موضح من قبل، تتلقى المستند الحدث النقر نفسه. ثم يبحث ثم نسخ خط العناصر المستهدفة من قبل الحدث والتحقق لمعرفة ما إذا كان أي منهم يتطابق باستفسارك.
نتيجة هذه هي ذات شقين: أولا، فهذا يعني أنه لا يتعين عليك مواصلة إعادة تطبيق الأحداث إلى عناصر جديدة، حيث سيتم إضافة ضمنيا عندما يحدث الحدث. ومع ذلك، والأهم من ذلك (اعتمادا على وضعك)، فهذا يعني أن الكود الخاص بك هو أخف وزنا! إذا كان لديك 50 <img> العلامات على الصفحة وتشغيل هذا الرمز:
$('img').click(function() { /* doSomething */ });
... ثم هذه الوظيفة نسخ في كل من تلك العناصر. ومع ذلك، إذا كان لديك هذا الرمز:
$('img').live('click', function() { /* doSomething */ });
... ثم يتم تخزين هذه الوظيفة فقط في مكان واحد (في المستند)، ويتم تطبيقها على كل ما يطابق استفسارك في وقت الحدث.
بسبب هذا السلوك الفقاعي، لا يمكن معالجة جميع الأحداث بهذه الطريقة. كما لاحظ إيشيبان، هذه الأحداث المدعومة هي النقر، Dblclick Mousedown، Mouseup، Mousemove، Mouseover، Mouseout، Keydown، Keypress، Keyup.
سيقوم BIND بإلقاء الأحداث على النمط المحدد، لجميع المباريات في DOM الحالي في الوقت الذي تسميهه. سيقوم Live بإلقاء ربط الأحداث بالنمط المحدد للمنظمة الحالية والمباريات المستقبلية في DOM، حتى لو كان يتغير.
على سبيل المثال، إذا كنت تربط $ ("DIV"). ربط ("تحوم"، ...) سوف تنطبق على جميع "DIV" في دوم في ذلك الوقت. إذا قمت بعد ذلك بمعالجة DOM وإضافة "DIV" إضافية، فلن يكون هذا الحدث المرتبط. باستخدام Live بدلا من BIND سوف يرسل الحدث إلى DIV الجديد أيضا.
قراءة لطيفة على هذا: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
في الوقت الحاضر (منذ jQuery 1.7) تم إهمالها باستخدام وظيفة .ON () - http://api.jquery.com/on/
تخيل هذا السيناريو:
- لدي العديد
<img>عناصر.$('img').bind('click', function(){...});- أضف بعض الصور الإضافية (باستخدام
get(), ، أوhtml(), ، اي شى) - الصور الجديدة لا تملك أي ملزئة !!
بالطبع، نظرا لأن الصور الجديدة غير موجودة عندما فعلت $('img')... في الخطوة 2، لم يربط معالج الحدث إليهم.
الآن، إذا قمت بذلك:
- لدي العديد
<img>عناصر.$('img').live('click', function(){...});- أضف بعض الصور الإضافية (باستخدام
get(), ، أوhtml(), ، اي شى) - الصور الجديدة فعل لديك ملزمة!
سحر؟ قليلا فقط. في الواقع، يربط JQuery بمعالج حدث عام إلى عنصر آخر أعلى في شجرة دوم (هيئة الجسم؟ لا فكرة) ولا تتيح للوقت فقاعة. عندما يصل إلى المعالج العام، فهو يتحقق إذا كان يطابق الخاص بك live() الأحداث وإذا كان الأمر كذلك، فقد أطلقوا النار، بغض النظر عما إذا تم إنشاء العنصر قبل أو بعد live() يتصل.
في تقدير ما قالوا، أعتقد أنه من الأفضل أن تحاول التمسك bind متى / حيث يمكنك واستخدامها live فقط عندما يجب عليك.
تستخدم كل هذه الأساليب المسجلة لإرفاق الأحداث إلى محددات أو عناصر. لكنهم جميعا يختلفون عن بعضهم البعض.
.ربط(): هذه هي الطريقة الأسهل والسريعة لربط الأحداث. لكن المشكلة مع BIND () هي أنه لا يعمل للعناصر المضافة بشكل حيوي يطابق نفس محدد. BIND () إرفاق الأحداث فقط للعناصر الحالية وليس العنصر في المستقبل. أعلى من ذلك، لديها أيضا مشاكل الأداء عند التعامل مع مجموعة كبيرة.
.يعيش(): هذه الطريقة تتغلب على عيوب الربط (). يعمل من أجل عناصر إضافية ديناميكيا أو عناصر في المستقبل. بسبب ضعف أدائها في الصفحات الكبيرة، يتم إهمال هذه الطريقة اعتبارا من jQuery 1.7 ويجب أن تتوقف عن استخدامها. غير مدعومة بشكل صحيح باستخدام هذه الطريقة.
اكتشف المزيد هنا
أردت أن أضيف إلى هذا بعد الاضطرار إلى تصحيح بعض الشيء بسبب دائرتي الخاصة. لقد قمت بتطبيقها .Live () إلى فئة زر موجودة في صفحتي، على افتراض أنه من شأنه أن يجعل المعرف الصحيح الذي كنت أحاول تمرير سلسلة الاستعلام ويفعل ما أردت القيام به مع مكالمة AJAX. يحتوي تطبيقي على أزرار مضافة ديناميكيا مرتبطة بند مخزون. على سبيل المثال، قم بتنظيف الفئات إلى زر "فحم الكوك" لإضافة فحم الكوك إلى طلبك. قم بالتنقيط من الأعلى مرة أخرى، وأضف "Budlite" - في كل مرة أرد فيها إدخال هذه العناصر في جدول عبر مكالمة AJAX.
ومع ذلك, ، منذ أن ارتبط .live () إلى فئة الأزرار بأكملها، سيتذكر كل مكالمة AJAX التي صنعتها وإعادة إطلاقها لكل زر لاحقة! لقد كانت صعبة بعض الشيء لأنني لم أكن واضحا تماما على الفرق بين الربط والعيش (والإجابة أعلاه هي الكريستال حول هذا الموضوع)، لذلك أحسبت أنني وضعت هذا هنا في حالة قيام شخص ما ببحث على هذه الأشياء وبعد
هناك طريقة للحصول على تأثير حي ولكن نوعه من سيئة.
$ (
سيؤدي ذلك إلى مسح السابق وإعادة تعيين الجديد. يبدو أنه يعمل بشكل جيد بالنسبة لي بمرور الوقت.
الفرق بين Live و LiveQuery ناقش هنا .
