Datatables Я не могу назвать событие onclick после разбивки страницы?

Я использую http://datatables.net/

Демо-таблица на их домашней странице напоминает почти то же самое, что я использую (например, разбиение на страницы), за исключением того, что каждая строка имеет область для клика:

<a href="#" class="show-post"><%= Post.title %></a>

Эта ссылка открывает диалоговое окно jQuery UI modal, в котором отображается некоторая информация, запрашиваемая ajax.

Часть 1 (решена), см. часть 2 ниже

Я пытаюсь запустить событие onclick, которое работает нормально на первой странице, но как только я перехожу на страницу 2 (или любые другие), она перестает работать. Я проверил источник, чтобы убедиться, что он не делал ничего смешного во всем коде, где он присутствует (все строки, даже те, которые скрыты в разбивке на страницы)

Любые идеи?

$(function() {
    $('#dialog').dialog({
        autoOpen: false,
        resizable: false,
        maxHeight: 600,
        width: 650,
        modal: true,
        beforeClose: function close() {
            $('#dialog').html('');
        }
    });

    $('.show-post').click(function() {
        clickLink(this);
        return false;
    });
});

Спасибо тем, кто ответил на мой вопрос! Я исправил эту проблему.

Часть 2

мой следующий "вопрос", как и для работы, - это... Я использую клавиши со стрелками влево и вправо, чтобы они могли "сканировать" на следующую или предыдущую строку и отображать информацию. Это, в отличие от закрытия, а затем нажать на следующую.

Я хотел бы сделать это, когда вы дойдете до нижней части первой страницы или вверху страницы второй, чтобы следующая/предыдущая, соответственно, автоматически загрузили эту страницу, перейдите в верхнюю часть (или снизу), затем откройте это диалога для этой строки на другой странице.

heres my click function (я знаю, что его вид, вероятно, не структурирован лучше... im new для jquery)

$(document).ready(function() {
    oTable = $('#posts').dataTable({
      "bJQueryUI": true,
      "iDisplayLength": 400,
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]]
    });

    $(this).keydown(function(e) {
        var id = $("#dialog").attr("data-id");
        currentPost = $("#posts tr[data-id=" + id + "]");

        if (e.keyCode == 39 && $('#dialog').html() != "") {

            /* Remove current background */
            $(currentPost).blur()
            $(currentPost).removeClass("current");
            $(currentPost).find("td.sorting_1").removeClass("current");

            var next = currentPost.next().find(".show-post");
            clickLink(next);

        } else if (e.keyCode == 37 && $('#dialog').html() != "") {

            /* Remove current background */
            $(currentPost).removeClass("current");
            $(currentPost).find("td.sorting_1").removeClass("current");

            var prev = currentPost.prev().find(".show-post");
            clickLink(prev)
        }
    });
});

показывает фактическую функцию щелчка

function clickLink(src) {
var post = $(src);
var id = $(post).parent().parent().attr('data-id');

/* Set background for current line */
$(post).parent().parent().find("td.sorting_1").addClass("current");
$(post).parent().parent().addClass("current");

$('#dialog').attr("data-id", id);

$('#dialog').load('/show-post/' + id, function() {

    $.ajax({
        type: "POST",
        url:  "/checkstatus/" + id,
        dataType: "html",
        error: function(data){
            $("#dialog").fadeOut("fast", function() {
            $("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow");
           });
        }
    });

    /* Set Visited */
    $(post).parent().parent().removeClass("visited").addClass("visited");

    $('#dialog').dialog({
        title: post.html(),
        beforeClose: function close() {
            $(post).parent().parent().find("td.sorting_1").removeClass("current");
            $(post).parent().parent().removeClass("current");
        },
        buttons: {
            "Email 1": function() {
                $.ajax({
                    type: "POST",
                    url:  "/get-email/" + id + "/" + "1",
                    dataType: "html",
                    success: function(data) {
                        window.location.href = data + "&subject=" + post.html();
                    }
                });
            },

        }
    });
    $('#dialog').dialog('open');
});
return false;
};

ОТВЕТЫ

Ответ 1

Пример ссылки, которую вы предоставили, по-видимому, заключается в добавлении/удалении элементов DOM, что означает, что элементы на последующих страницах, вероятно, не находятся в DOM при загрузке страницы. Вы пытались использовать делегирование событий?

$(<root element>).delegate('.show-post', 'click', function() {
    clickLink(this);
    return false;
});

Где <root element> может быть document, но должен быть установлен на элемент предка, который всегда находится в DOM.

.delegate():

Прикрепите обработчик к одному или нескольким событиям для всех элементов, соответствующих селектор, теперь или в будущем, на основе определенного набора корней элементы.

Источник: http://api.jquery.com/delegate

UPDATE

Обратите внимание, что .delegate() теперь является псевдонимом .on(), поэтому, если вы используете jQuery 1.7+, я просто использовал бы .on() прямо из get-go. Почти тот же синтаксис, кроме селектора и события, заменяется: $(<root element>).on('click', '.show-post', function() { ... });

Источник: Спасибо Грег Петтит, отличный комментарий

Ответ 2

Ниже код работает отлично. Когда вы нажимаете кнопку разбиения на страницы "drawCallback", вызывайте некоторую функцию после загрузки таблицы.

$("#YourTableID").dataTable({
                    bJQueryUI: false,
                    bFilter: false,
                    bSearchable: false,
                    bInfo: false,
                    bAutoWidth: false,
                    bDestroy: true,
                    "oLanguage": {
                        "sEmptyTable": "No Records Found"
                    },
                    "sPaginationType": "full_numbers",
                    "bLengthChange": false,
                    "iDisplayLength": 5,
                    aaData: arrv,
                    aoColumns: [{
                        sTitle: "Select",
                        orderable: false,
                        className: 'select-checkbox',
                        targets: 0
                    },
                    {
                        sTitle: "Course name"
                    }, {
                        sTitle: "Level"
                    }, {
                        sTitle: "Study Mode"
                    }, {
                        sTitle: "Entry Year"
                    }, {
                        sTitle: "Point of Entry"
                    }, {
                        sTitle: "Awarding qualification"
                    }],
                    drawCallback: function () {
                        //Some function...
                    },
                    select: {
                        style: 'os',
                        background: 'color:gray',
                        selector: 'td:first-child'
                    },
                    order: [[1, 'asc']],

                });

Ответ 3

Как заметил @scrappedcola в комментариях, ваш обработчик кликов потерян после разбивки на страницы. Существует функция drawCallback для DataTables, которую вы можете реализовать, которая будет срабатывать после того, как таблица будет "перерисована" (отсюда drawCallback). Вот пример:

$('#someId').DataTable({
    lengthMenu: [ 25, 50, 100, 200 ],
    order: [[ 0, 'asc' ]],
    processing: true,
    serverSide: true,
    stateSave: true,
    responsive: true,
    bDestroy: true,
    columns: [
        { data: 'id', name: 'id' },
        { data: 'name', name: 'name' },
    ],
    drawCallback: function() {
        var api = this.api();
        api.$('#someBtnId').click(function() {
            // do some click handler stuff
        });
    }
});