إرفاق الأحداث بعناصر html الديناميكية في jQuery

عند العمل مع المحتوى المحمّل ديناميكيًا في تطبيقات الويب ، وربط مستمعي الأحداث بعناصر قد لا تكون موجودة في الصفحة تحديًا. في هذه المقالة ، سوف نستكشف كيفية التعامل مع هذا السيناريو بفعالية باستخدام مكتبة jQuery.

التحدي

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

$ (function () { $ (". myClass"). انقر فوق (function () { // افعل شيئًا }) ؛ }) ؛

$(function() {
    $(".myclass").click(function() {
        // Do something
    });
});

يعمل هذا الرمز بشكل جيد للعناصر الموجودة مع ".myclass" ، لكنه لن يعلق معالجات الأحداث على العناصر التي تمت إضافتها لاحقًا عبر العمليات الديناميكية ، مثل Ajax أو تم إنشاؤها ديناميكيًا HTML.

بدلاً من إرفاق الأحداث مباشرةً بمحدد معين ، نحدد عنصرًا رئيسيًا ونستخدم تفويض الحدث لالتقاط الأحداث لأحفاد المضافة ديناميكيًا.

// افعل شيئًا }) ؛

في هذا المثال ، فإن النقر على أي عنصر يطابق المحدد 'A.MyClass' داخل الجسم يتم استخدام العنصر

body

كعنصر الأصل في هذه الحالة ، ولكن يمكن استخدام أي عنصر الوالد الثابت عندما يتم استخدام طريقة . على () [) الرمز:

$('body').on('click', 'a.myclass', function() {
    // Do something
});

$ (this) .append ('

عندما ينقر المستخدم على عنصر #anchor1 ، يتم إنشاء رابط جديد مع ".myclass". بشكل فعال.