Question

鉴于我正在研究的项目的性质，我试图避免使用插件来实现可伸缩性。但是，如果事实证明插件是需要的，我愿意接受建议。

首先，我在我的jQuery分页脚本中取得了成功，因为使用预定义（在我的coldfusion脚本中）类“loadLink”的超链接，我能够在新表中每页生成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成功处理程序中嵌入的绑定调用。

JQuery Coldfusion动态排序HyperLink问题

2 个答案: