0

我正在为一些数据的分页生成一些链接。

这是生成链接的函数：

function BuildPaginationNav(targetPage, pageSize) {

    var numRecords = $('#movieListTable').children().length,
    numPages = Math.ceil(numRecords / pageSize),
    startRecord = ((targetPage - 1) * pageSize);

    for (var i = startRecord; i <= startRecord + pageSize - 1; i++) {
        $('div#movieListTable > div:eq(' + i + ')').fadeIn(200);
    }

    // Only use prev page and first page buttons/links if not on first page
    if (targetPage > 1) { 
        $('#pagination').append('<br><a href="#" id="firstPage">First Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="prevPage">Prev Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;');
    } else if (targetPage = 1) {
        $('#pagination').append('<br>First Page&nbsp;&nbsp;|&nbsp;&nbsp;Prev Page&nbsp;&nbsp;|&nbsp;&nbsp;');
    }

    // Add the current page label
    $('#pagination').append('<label id="currentPage">' + targetPage + '</label>');

    // Only use next page and last page buttons/links if not on last page
    if (targetPage < numPages) {
        $('#pagination').append('&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="nextPage">Next Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="lastPage">Last Page</a>');
    } else if ( targetPage === numPages) {
        $('#pagination').append('&nbsp;&nbsp;|&nbsp;&nbsp;Next Page&nbsp;&nbsp;|&nbsp;&nbsp;Last Page');
    }
}

上述工作按预期工作，并且该函数在 $.ajax 调用中的成功函数末尾调用，该调用获取分页所针对的数据。

如果生成的 HTML 不在第一页或最后一页上，则如下所示：

<div id="pagination">
    <br>
    <a href="#" id="firstPage">First Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" id="prevPage">Prev Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <label id="currentPage">2</label>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" id="nextPage">Next Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#" id="lastPage">Last Page</a>
</div>

我需要做的是获取被点击的链接的 ID，以便我可以采取适当的行动。我试过这个：

$('#pagination a').click(function() {
    console.log(this.id);
});

我也试过这个：

$('#pagination a').on('click', function() {
    console.log(this.id);
});

但两者都不起作用 - 好吧，如果我将生成的 HTML 和上面的 jQuery 放在 jsFiddle 中它确实有效，但它不在完整代码中。

我对 $.on() 在这种情况下不起作用感到特别惊讶，因为我在代码的其他地方使用了该函数。

如果我将生成的 HTML 作为 HTML 放入页面本身，则 jQuery确实可以工作，因此它必须具有链接是动态生成的事实。

如何获得对这些链接的点击以被检测到？

4

3 回答 3

0

绑定事件时尚未创建您的链接。您需要在某些现有元素上绑定实时动作。

$(document).ready(function() {

    $("#pagination").on('click', 'a', function() { .... });

});

'#pagination' 元素应该在绑定事件发生时可用。它被称为委托事件 - http://api.jquery.com/on/

于 2013-03-15T21:26:46.030 回答
0

我会按照以下方式完成。

你的方式：

 // Only use prev page and first page buttons/links if not on first page
    if (targetPage > 1) { 
        $('#pagination').append('<br><a href="#" id="firstPage">First Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" id="prevPage">Prev Page</a>&nbsp;&nbsp;|&nbsp;&nbsp;');
    } else if (targetPage = 1) {
        $('#pagination').append('<br>First Page&nbsp;&nbsp;|&nbsp;&nbsp;Prev Page&nbsp;&nbsp;|&nbsp;&nbsp;');
    }

我的方式：

 // Only use prev page and first page buttons/links if not on first page
    if (targetPage > 1) { 
$FirstPage=$('<a href="#" id="firstPage">First Page</a>');
$FirstPage.click(function() { .... });
$('#pagination').append($FirstPage);

        //same for Prev page...
    } else if (targetPage = 1) {
       // same as above..
    }

这样......我可以在一个地方找到我的链接行为，只是我不需要在整个页面中搜索就知道......锚点的点击事件......还有更多！

于 2013-03-18T04:49:45.620 回答
0

我想到了：

我找到了函数 $.delegate();

我在 BuildPaginationNav() 函数的末尾添加了这段代码：

$('#pagination').delegate('a', 'click', function() { console.log(this.id); });

我将从那里（console.log() 所在的位置）调用一个函数，该函数将执行必要的操作。

如果有不同（甚至更好）的方法，请告诉我！

于 2013-03-15T21:32:24.137 回答