分页后我无法调用 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 部分

我想开始工作的下一个“问题”ID 是...我正在使用左右箭头键让他们“扫描”到下一行或上一行，并显示信息。这与关闭它然后必须单击下一个相反。

我想这样当您到达第一页的底部或第二页的顶部时，分别隐藏下一个/上一个将自动加载该页面，转到顶部（或底部），然后打开该页面另一页上该行的对话框。

这是我的点击功能（我知道它的结构可能不是最好的......我是 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+，我会从一开始就使用 .on()。除了选择器和事件交换之外几乎相同的语法：$(<root element>).on('click', '.show-post', function() { ... });

来源：感谢 Greg Pettit，优秀的评论

Answer 2

以下代码运行良好。当你点击分页按钮'drawCallback'类在表格加载后调用一些函数。

$("#YourTableID").dataTable({ bjQueryUI：假， b过滤器：假， b可搜索：假， bInfo：假， bAutoWidth：假， bDestroy：真， “语言”：{ "sEmptyTable": "没有找到记录" }, "sPaginationType": "full_numbers", “bLengthChange”：假， “iDisplayLength”：5， aaData：到达， ao列：[{ sTitle: "选择", 可订购：假， className: '选择复选框', 目标：0 }, { sTitle：“课程名称” }, { sTitle：“级别” }, { sTitle：“学习模式” }, { sTitle：“入学年份” }, { sTitle：“入口点” }, { sTitle：《授予资格》 }], drawCallback: 函数 () { //一些函数... }, 选择： { 风格：'os'， 背景：'颜色：灰色'， 选择器：'td:first-child' }, 顺序：[[1，'asc']]， });

Answer 3

正如@scrappedcola 在 cmets 中指出的那样，您的点击处理程序在分页后会丢失。您可以为 DataTables 实现一个 drawCallback 函数，该函数将在表“重新绘制”后触发（因此为 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
        });
    }
});