JQuery Coldfusion动态排序超链接问题

Question

鉴于我正在从事的项目的性质，为了可扩展性，我试图避免使用插件。但是，如果事实证明需要一个插件，我愿意接受建议。

首先，我在我的 jQuery 分页脚本中取得了成功，因为使用“loadLink”类的预定义（在我的 Coldfusion 脚本中）超链接，我能够在新表中每页生成 10 行数据得到处理并显示在 div 标签内。此外，我可以通过单击我想要排序的标题之一来重新排序该分页记录表中的数据。就像页面链接一样，它向 CF 组件发送一个 ajax 调用，该组件以完整的新排序再现表。

一切正常，但我遇到了一个大问题。每次我选择要查看的新记录页面时，我仍然可以执行一种新的数据。但是，当我尝试对任何列进行第二种排序时，脚本会自行重新加载，而不是进行另一个 ajax 调用。本质上，点击功能并没有打开，即使我认为我确实再次打开了它。我知道我遗漏了一些东西，但这是我正在使用的代码：

$(document).ready(function() {
// load the first page of records upon initial load.
$("##mydiv").load("generateInfo.cfc?method=getEmailData", function() {
    $(".sortLink").on("click", function(e) {
        e.preventDefault();
        var recorddata = $(this).attr("href").substring(1); //trim '?' char
        $.ajax({
            type: "GET",
            url: "generateInfo.cfc?method=getEmailData",
            data: recorddata,
            dataType: "html",
            success: function(message) {                            
                $("##mydiv").html(message);
            }
        });
    });
});

$(".loadLink").click(function(e) {
    e.preventDefault();
    var recorddata = $(this).attr("href").substring(1); //trim '?' char
    var curElement = $(this);
    if ($(this).attr("id") != "disabledLink") {
        $.ajax({
            type: "GET",
            url: "generateInfo.cfc?method=getEmailData",
            data: recorddata,
            dataType: "html",
            success: function(message) {
                $('##pageLinks').children('a').each(function () {
                    if ($(this).attr("id") == "disabledLink") {
                        $(this).removeAttr("disabled");
                        $(this).removeAttr("id");
                    }
                });
                curElement.attr("disabled","disabled");
                curElement.attr("id","disabledLink");
                $("##mydiv").html(message);
                $(".sortLink").on("click", function(e) {
                    e.preventDefault();
                    alert($(this).attr("class"));
                    var recorddata = $(this).attr("href").substring(1); //trim '?' char
                    $.ajax({
                        type: "GET",
                        url: "generateInfo.cfc?method=getEmailData",
                        data: recorddata,
                        dataType: "html",
                        success: function(message) {                            
                            $("##mydiv").html(message);
                            $(".sortLink").on("click");
                        }
                    });
                });
            }
        });
    }
});
});

我在这里遗漏了什么，或者我还需要做什么才能让排序以 ajax 格式持续工作？

Answer 1

我认为您可以通过委派事件来稍微简化代码：

$(document).ready(function() {
    // cache mydiv location
    var $mydiv = $("##mydiv");
    $mydiv.on("click",".sortLink",function(e){
        e.preventDefault();
        // split on ? instead to avoid an IE issue on dynaimcally created anchors.
        var recorddata = $(this).attr("href").split("?")[1]; //trim '?' char
        $.ajax({
            type: "GET",
            url: "generateInfo.cfc?method=getEmailData",
            data: recorddata,
            dataType: "html",
            success: function(message) {
                $mydiv.html(message);
            }
        });
    }).on("click",".loadLink",function(e){
        e.preventDefault();
        // split on ? instead to avoid an IE issue on dynaimcally created anchors.
        var recorddata = $(this).attr("href").split("?")[1];
        var curElement = $(this);
        if ($(this).attr("id") != "disabledLink") {
            $.ajax({
                type: "GET",
                url: "generateInfo.cfc?method=getEmailData",
                data: recorddata,
                dataType: "html",
                success: function(message) {
                    $('##pageLinks').children('a').each(function() {
                        if ($(this).attr("id") == "disabledLink") {
                            $(this).removeAttr("disabled");
                            $(this).removeAttr("id");
                        }
                    });
                    curElement.attr("disabled", "disabled");
                    curElement.attr("id", "disabledLink");
                    $mydiv.html(message);
                }
            });
        }
    });

    // load the first page of records upon initial load.
    $("##mydiv").load("generateInfo.cfc?method=getEmailData");

});

这将确保您的事件始终绑定在 ajax 构建的 DOM 节点上。

就我对recorddata 所做的更改而言，在IE 中，如果您在加载后动态添加锚标记，它将包含该位置的完整路径，而不是您给它的路径。因此，如果您将href 设置为?foo=bar，它将是http://mydomain.com?foo=bar

评论的变化：

}).on("click",".loadLink",function(e){

变成

});
$(".loadLink").on("click",function(e){

Answer 2

您为 .sortLink 绑定了两次点击处理程序，两者都将在点击时触发。尝试删除您在 Ajax 成功处理程序中嵌入的绑定调用。