طريقة حل مشكلة عدم استجابة عناصر DOM للأحداث مثل click

لقد واجهت دائمًا مشكلة عدم فعالية click في العناصر المولدة من الإضافات js، ولم يتم إعادة التوصيل، وقد وجدت الحل النهائي، وأود تدوينه هنا.

في نفس الوقت، تعميق فهمك لآلية معالجة أحداث js.

1. تم فك التوصيل للحدث

في هذه الحالة، لا يُحتمل أن يؤدي إلى تعطيل click، ولكن في الحالات التالية، يُتعطّل click:

$(function(){
 $('.btn').unbind()
})
$('.btn').click(function() {
 //...
 })

لذا، يجب أن يكون لدى click عادة جيدة:

$(function(){
 $('.btn').click(function() {
 //...
 })
}) 

2. تحميل ديناميكي للـ js الإضافي (الإضافات)

غالبًا يحتوي على وقت الإنتظار أو وقت بدء التشغيل: WaitTime

في هذه الحالة، الاتصال المباشر أو الاستماع غير فعال:

$(function(){
 $('.container .btn').on('click',function() {
 //...
 })
}) 

الحل الأول:

$(function(){
 setTimeout(function { 
 $('.container .btn').click(function() {
  //...
  })
 //.btn بعد التحميل إضافة الحدث 
 },WaitTime) 
}) 

حل المشكلة 2 (تفويض الحدث، أي تفويض إلى العنصر الأم):

$(function(){
 $('.container').on('click','.btn',function(){
 //...
 })
}) 

3. تحميل DOM بشكل متزامن باستخدام AJAX

• يمكنك إضافة أحداث النقر في جسم وظيفة done()
• كما في الطريقة المماثلة لتفويض الحدث

4. عدم استجابة النقر على الرابط

الكود التالي سيجعل علامة a لديها href ولكن لا يمكنها التحول

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
}) 

حل المشكلة:

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
 $('a').unbind()
})

ملخص

1. تخصيص الحدث، استماع الحدث، تفويض الحدث رابط مرجعي

2. التقاطع والانتشار للحدث رابط مرجعي

 target.addEventListener(type, listener[, options]);
 target.addEventListener(type, listener[, useCapture]);

التقاطع الحدث

يحدث أولاً في العناصر الأم، ثم في العناصر الفرعية

انتشار الحدث

يحدث أولاً في العناصر الفرعية، ثم في العناصر الأم

3. ترتيب تنفيذ JavaScript

هذا هو نهاية محتويات هذا المقال، نأمل أن تكون محتويات هذا المقال قد ساعدتكم في التعلم أو العمل، ونأمل أيضًا أن تشجعوا دروس الصراخ!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات مملوكة للمالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت بشكل متعاوني وتحميلها بشكل مستقل، لا تملك هذا الموقع حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية ذات صلة. إذا كنت قد وجدت محتويات مشبوهة بحقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتويات المشبوهة فوراً.