JQuery Coldfusion Динамическая сортировка HyperLink Проблема

Question

Учитывая характер проекта, над которым я работаю, я стараюсь избегать использования плагинов для масштабируемости.Однако, если выясняется, что плагин - это то, что нужно, я открыт для предложений.

Во-первых, у меня есть успех в моем сценарии разбиения на страницы jQuery, в котором используются предопределенные (в моем сценарии coldfusion) гиперссылкикласса «loadLink», я могу создать 10 строк данных на странице в новой таблице, которая обрабатывается и отображается внутри тега div.Кроме того, я могу заставить его пересортировать данные в этой разбитой на страницы таблице записей, щелкнув один из заголовков, по которым я хочу отсортировать.Как и ссылки на страницы, он отправляет ajax-вызов компоненту CF, который воспроизводит таблицу с новым видом без изменений.

Все это прекрасно работает, но здесь я сталкиваюсь с большой проблемой.Каждый раз, когда я выбираю новую страницу записей для просмотра, я все равно могу выполнить один новый вид этих данных.Тем не менее, когда я пытаюсь выполнить второй вид любого столбца, скрипт перезагружается, а не выполняет другой вызов 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

Вы дважды связываете обработчик клика для .sortLink, и оба будут срабатывать при клике. Попробуйте удалить привязанный вызов, встроенный в обработчик успеха Ajax.

Answer 2

Я думаю, вы можете немного упростить свой код, делегируя события:

$(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");

});

Это гарантирует, что ваши события всегда будут привязаны к DOM узлам, построенным в ajax.

Что касается изменения, которое я внес в recorddata, в IE, если вы динамически добавляете тег привязки после загрузки, он будет содержать полный путь к местоположению, а не путь, который вы указали. Итак, если вы установите href как ?foo=bar, это будет http://mydomain.com?foo=bar

Изменить комментарий:

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

становится

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