Question

我正在尝试使用AJAX请求使用JQuery将一些信息加载到表中。我可以轻松加载内容，但是在添加事件处理程序以在加载的内容上应用样式时遇到问题。

我正在向表中应用条带化小部件。但是，当我的AJAX请求返回并且我的信息被附加到表体时，它没有应用样式。

JQuery教程提到使用load事件来处理这个问题，但我无法让它工作。

任何帮助都将不胜感激。

$(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

这是你应该做的：

在tablesorter website上找到它。

它的长短是你应该在追加数据后调用$( "#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" );
        });
    });
});

如何在JQuery中加载AJAX内容后触发事件处理程序

5 个答案: