كيفية ربط حدث عند النقر بعناصر HTML المضافة ديناميكيًا باستخدام jQuery

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

المشكلة والحل السابق

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

الحل الصحيح باستخدام .on()

لربط حدث onclick بشكل صحيح بحدث تمت إضافة العنصر ديناميكيًا باستخدام jQuery، يجب عليك استخدام الأسلوب .on() كما يلي:

$(document).on('click', '.my-element', function() {
  // Your event handling code goes here
});

في هذا المثال، يتم استخدام الأسلوب .on() لإرفاق معالج حدث بالمستند، مع تحديد الحدث 'click' والمحدد '.my-element'. وهذا يضمن أن أي عنصر بالفئة 'my-element' سيعمل على تشغيل معالج الحدث، بغض النظر عن وقت إضافته إلى الصفحة.

مثال للاستخدام

هنا مثال لتطبيق طريقة .on():

في هذا المثال، يتم استخدام طريقة .on() لإرفاق معالج حدث إلى أي عنصر يحتوي على الفئة "my-element" ضمن قسم #container. عند النقر على أي عنصر من هذا القبيل، فإنه سيتم تشغيل رسالة تنبيه.