it-swarm.asia

وظيفة النقر jQuery لا تعمل بعد استدعاء ajax؟

وظيفة النقر jQuery تعمل بشكل جيد هنا

<div id="LangTable"><a class="deletelanguage">delete</a></div>    

$('.deletelanguage').click(function(){
    alert("success");
});

ولكن إذا قمت بتعيين بعض <a> بواسطة ajax ، فلن يعمل $('.deletelanguage').click.

فمثلا

function CreateRow(jdata) { 
    $('#LangTable').append('<a class="deletelanguage">delete</a>');
}

$.ajax({        
    url: "/jobseeker/profile/",
    success: CreateRow
});

الآن $('.deletelanguage').click لآخر <a> لا يعمل.

مثال jsfiddle: http://jsfiddle.net/suhailvs/wjqjq/

ملاحظة: CSS يعمل بشكل جيد هنا.

أريد أن أجعل هذه <a> الملحقة حديثًا تعمل بنقرة مسج.

68
suhailvs

المشكلة هي أن .click يعمل فقط للعناصر الموجودة بالفعل على الصفحة. يجب عليك استخدام شيء مثل on إذا كنت تستخدم عناصر مستقبلية

$("#LangTable").on("click",".deletelanguage", function(){
  alert("success");
});
163
TGH

عند استخدام $('.deletelanguage').click() لتسجيل معالج الأحداث ، فإنه يضيف المعالج إلى تلك العناصر الموجودة في dom فقط عندما تم تنفيذ الكود

تحتاج إلى استخدام معالجات الأحداث القائمة على التفويض هنا

$(document).on('click', '.deletelanguage', function(){
    alert("success");
});
69
Arun P Johny
$('body').delegate('.deletelanguage','click',function(){
    alert("success");
});

أو

$('body').on('click','.deletelanguage',function(){
    alert("success");
});
18
coolguy

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

$('#LangTable').on('click', '.deletelanguage', function(event) {
    event.preventDefault();
    alert("success");
});

سيؤدي هذا إلى إرفاق الحدث بأي نقاط ربط ضمن عنصر #LangTable ، مما يقلل من نطاق الاضطرار إلى التحقق من شجرة العناصر document بأكملها وزيادة الكفاءة.

عرض FIDDLE

6
palaѕн

إليككمان

نفس الكود الخاص بك ولكنه سيعمل على العناصر التي تم إنشاؤها ديناميكيًا.

$(document).on('click', '.deletelanguage', function () {
    alert("success");
    $('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});
2
Vond Ritz

حدث النقر غير موجود في تلك المرحلة حيث يتم تعريف الحدث. يمكنك استخدام مباشر أو تفويض الحدث.

$('.deletelanguage').live('click',function(){
    alert("success");
    $('#LangTable').append(' <br>------------<br> <a class="deletelanguage">Now my class is deletelanguage. click me to test it is not working.</a>');
});
2
prospector

اختبرت حلاً بسيطًا يناسبني! كان javascript الخاص بي في ملف js منفصل. ما فعلته هو أنني وضعت جافا سكريبت للعنصر الجديد في أتش تي أم أل التي تم تحميلها مع اياكس ، وأنها تعمل بشكل جيد بالنسبة لي! هذا هو لأولئك الذين لديهم ملفات كبيرة من جافا سكريبت!

1
pollux1er