كيف تفعل الربط المبكر لمعالج الأحداث في JavaScript؟ (مثال مع jQuery)

Question

الربط المتأخر لـ JavaScript رائع. لكن كيف يمكنني الربط المبكر عندما أريد ذلك؟

أنا أستخدم jQuery لإضافة روابط مع معالجات الأحداث في حلقة إلى Div. يتغير المتغير "ATAG" في الحلقة. عندما أقوم بالنقر فوق الروابط لاحقًا ، تنبه جميع الروابط نفس الرسالة ، وهي القيمة الأخيرة لـ "ATAG". كيف يمكنني ربط رسالة تنبيه مختلفة بجميع الروابط؟

يجب أن تنبه جميع الروابط بالقيمة التي كانت لها "ATAG" عند إضافة معالج الحدث ، وليس عند النقر عليه.

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.click(function() { alert(aTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 1

يمكنك تمرير البيانات إلى bind طريقة:

nextTag.bind('click', {aTag: aTag}, function(event) {
    alert(event.data.aTag);
});

هذا سوف يجعل نسخة من aTag, ، لذلك سيكون لكل معالج حدث قيم مختلفة لذلك. حالة الاستخدام الخاصة بك هي بالضبط السبب في هذه المعلمة bind موجود.

الرمز الكامل:

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.bind('click', {aTag: aTag}, function(event) {
      alert(event.data.aTag);
    });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 2

يمكنك أيضًا إنشاء وظيفة غلاف تأخذ النص لتنبيه كمعلمة ، وإرجاع معالج الحدث

function makeAlertHandler(txt) {
  return function() { alert(txt); }
}

واستبدال

nextTag.click(function() { alert(aTag); });   

مع

nextTag.click(makeAlertHandler(aTag));

Answer 3

تحتاج إلى الاحتفاظ بنسخة من هذا المتغير ، مثل هذا:

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    var laTag = aTag;
    nextTag.click(function() { alert(laTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

ال aTag يتغير المتغير في كل مرة تقوم فيها بالحلقة ، في نهاية الحلقة ، يتم تركها كعنصر آخر في الحلقة. ومع ذلك ، كل من الوظائف التي قمت بإنشائها نقطة في هذا نفس عامل. بدلاً من ذلك ، تريد متغيرًا لكل ، لذا قم بعمل نسخة محلية كما سبق لي.

يمكنك أيضًا تقصير هذا الأمر كثيرًا بالسلاسل ، لكنني أشعر أنه يغيب عن النقطة في هذه الحالة ، لأن المشكلة هي النطاق والمراجع.