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

Question

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

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

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

Эта ссылка открывает модальное диалоговое окно jquery UI, в котором отображается некоторая информация, запрашиваемая 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

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

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

Вот моя функция щелчка (я знаю, что ее вид, вероятно, не структурирован лучше всего)... я новичок в 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;
};

Answer 1

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

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

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

.delegate():

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

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

ОБНОВЛЕНИЕ

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

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

Answer 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']],

                });

Answer 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
        });
    }
});