كيفية ربط معالجات الأحداث بالعناصر المنشأة ديناميكيًا في JavaScript؟

مرحبًا بالجميع! أنا مبتدئ في JavaScript وواجهت مشكلة لا أستطيع حلها. لدي قائمة مهام. يمكن للمستخدم إضافة عناصر جديدة عبر نموذج. يجب أن يحتوي كل عنصر في القائمة على زر "حذف" حتى يمكن حذف المهمة المحددة. المشكلة هي أنه عندما أضيف عنصر قائمة جديدًا ديناميكيًا عبر JavaScript (على سبيل المثال، باستخدام `innerHTML` أو `createElement`)، فإن معالج النقر على زر "حذف" لا يعمل. تعمل المعالجات فقط للعناصر التي كانت موجودة في HTML في الأصل. إليك كود مبسط يوضح المشكلة: ```html

• المهمة 1 حذف
• المهمة 2 حذف

إضافة مهمة ``` ```javascript // معالج لأزرار الحذف document.querySelectorAll('.delete-btn').forEach(btn => { btn.addEventListener('click', function() { this.parentEle