كيفية إطلاق معالجات الأحداث بعد تحميل محتوى Ajax في jQuery

Question

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

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

يذكر البرنامج التعليمي jQuery باستخدام حدث التحميل للتعامل مع هذا ، لكن لا يمكنني تشغيله.

سيكون موضع تقدير أي مساعدة.

$(document).ready(function(){
    $("#cowTable").tablesorter();
    addTableStriping();
});

function addTableStriping(){
    $("#cowTable").tablesorter({
        // striping looking
        widgets: ['zebra']  
    });
};

$(function(){
    $("#loadCowsButton").click(function(){
        $.post("loadCows.php", "scottm", function(xml) {
            $("#cowTable tbody").append(xml);
        });
    });
});

Answer 1

لقد وجدت حلاً لهذا الغرض. تحتاج إلى تشغيل "ApplyWidgets" بعد التحديث. شكرًا على كل المساعدة من الجميع ، لم أكن لأجد هذا بدون مساعدتك.

$(function(){
    $("#loadCowsButton").click(function(){
        $.post("loadCows.php", "scottm", function(xml) {
            $("#cowTable").append(xml);
            $("#cowTable").trigger("update");
            $("#cowTable").trigger("applyWidgets")
        });
    });
});

Answer 2

قد ترغب في تجربة LiveQuery Plugin

يستخدم Live Query قوة محددات jQuery عن طريق ربط الأحداث أو إطلاق عروض عمليات الاسترداد للعناصر المتطابقة تلقائيًا ، حتى بعد تحميل الصفحة وتحديث DOM.

Answer 3

هذا هو ما يجب عليك القيام به:

وجدها على موقع TableSter.

الطويل والقصير هو أنه يجب عليك الاتصال $( "#cowTable" ).trigger( "update" ); بعد إلحاق البيانات.

Answer 4

لماذا لا تسميها فقط في رد الاتصال Ajax؟

$(function(){
    $("#loadCowsButton").click(function(){
        $.post("loadCows.php", "scottm", function(xml) {
            $("#cowTable tbody").append(xml);
            addTableStriping(); // <-- here
        });
    });
});

Answer 5

هذا يجب أن يفعل ذلك ..

$(function(){
    $("#loadCowsButton").click(function(){
        $.post("loadCows.php", "scottm", function(xml) {
            $("#cowTable tbody").append(xml);
            $("#cowTable").trigger( "update" );
        });
    });
});