في الماضي ، استخدمت ربط JQuery بالأحداث مباشرة. ومع ذلك ، في ذلك الوقت ، لم أقم بإنشاء عناصر DOM بشكل ديناميكي ، لكن عناصر DOM التي كانت موجودة في الأصل على الصفحة لربط الحدث. في الآونة الأخيرة ، عندما اختبرت حدث ربط DOM الذي تم إنشاؤه ديناميكيًا ، وجدت أن الحدث غير صالح ، لذلك اختبرته:
1. أسباب فشل الحدث:
(1) ربط حدث الربط صحيح فقط للعناصر الموجودة في DOM. لا يمكن مراقبتها للعناصر التي نضيفها ديناميكيًا لاحقًا ، لذلك لا يمكن ربطها.
(2) وبالمثل ، عند استخدام var aa = document.getElementsByTagName ("عنصر تم إنشاؤه الديناميكي") ؛ للحصول على عناصر تم إنشاؤها ديناميكيًا ، نظرًا لأن صفحة الويب ستؤدي فقط ربط التهيئة مرة واحدة ، ولا يمكن مراقبة عناصر DOM التي تم إنشاؤها ديناميكيًا بعد ذلك.
2. الحل:
(1) ربط المزيد من الأحداث في كل مكان تم إنشاؤه ديناميكيًا ، مثل المثال في هذه المدونة
(2) تغيير الربط إلى Live ، لأنه يتم مراقبة Live في الوقت الحقيقي وهو فعال أيضًا لعناصر DOM المضافة حديثًا (لأنه ملزم باستمرار وحكم ، قد يؤثر على مشاكل أداء الويب)
(3) تغيير الارتباط بالفوضى ، لأنه يتم مراقبة المندوب في الوقت الفعلي.
(4) في jQuery1.7 ، تم استبدال أساليب BIND () ، و Live () والفوضى ().
3. فيما يتعلق بأسباب فشل الحدث الأخير: في صفحة الويب الأصلية (يمكن رؤية الرمز على https://github.com/ufowl/ife/tree/master/stage02/task16) ، أريد أن أحصل على زر الحذف الذي تم إنشاؤه ديناميكيًا في الجدول للمساعدة في حذف زر الحذف ، ولكن الحدث الحذف يكون غير صالح لأن الزر الحذف يكون ديناميكيًا. عند تهيئة ربط الحدث ، يكون الزر الموجود في الجدول الذي تم الحصول عليه فارغًا بالفعل ، وبالتالي فإن العناصر المرتبطة دائمًا فارغة ، لذلك لا توجد استجابة عند النقر فوق الزر.
4. الحل النهائي: أولاً احصل على الجدول ، ثم ربط حدث النقر فوق الجدول (لأن الجدول موجود في عنصر DOM الموجود بالفعل) ، ثم التقاط هدف الحدث (على سبيل المثال ، انقر فوق الزر في الجدول. في هذا الوقت ، لأن الزر قد تم إنشاءه ديناميكيًا وإلحاقه في الجدول ، في هذا الوقت. في هذا الوقت ، يشير الهدف إلى الزر) ، ثم إجراء عملية المقابلة.
ملاحظة: تم ملاحظة قضيتين هنا:
(1) تمت إضافة العناصر الموجودة في الجدول إلى الجدول ، لذلك عند النقر فوق هذا الزر ، فإن الزر الذي تحصل عليه هو العنصر الذي تريده.
(2) لماذا تمت إضافة الأزرار في الجدول ، ولكن لا يمكن الحصول عليها؟ نظرًا لأنه يتم الحصول على الأزرار الموجودة في الجدول عند تهيئة وظيفة init () ، ولكن لم يتم تنفيذ أي عملية في هذا الوقت ، لذلك ما تم الحصول عليه فارغ ، لذلك لا توجد عناصر ملزمة.
يجب تمييز المسألين اللذين يجب الاهتمام بهما أعلاه بشكل واضح ، وهذا هو مفتاح المشكلة.
5. حول الربط: بعد كل حدث ملزم ، سيتم ربط الحدث. قم بإلغاء الابتعاد ثم Rebind ، وإلا فإن الحدث سيكون موجودًا دائمًا. لذلك هذا هو السبب في أن العمل في مشروع ما ، في بعض الأحيان سيتم فرض نتيجة لطلب AJAX مثل 1 ، 2 ، 4 ، 8. لأنه إذا تم استخدام الربط ، فسيكون كل حدث التشغيل مرتبطًا بالعملية. لذلك ، عندما يتم تشغيل المرة الأولى ، سيتم طلب طلب AJAX مرة واحدة ؛ عندما يتم تشغيل المرة الثانية ، سيكون طلب AJAX 1+1 = 2 مرات ؛ المرة الثالثة هي 1+2+1 = 4 مرات ؛ المرة الرابعة هي 1+2+4+1 = 8 مرات ، وهلم جرا. لذلك ، إذا كنت تستخدم BIND لأحداث BIND ، فيجب عليك أولاً فك أحداث العنصر الأصلية أولاً ثم ربط الأحداث ، بحيث لن تتسبب طلبات AJAX عدة مرات.
المقالة أعلاه حول أسباب وحلول فشل الجيل الديناميكي لحادث ربط DOM هو كل المحتوى الذي يشاركه المحرر. آمل أن يعطيك مرجعًا وآمل أن تدعم wulin.com أكثر.