Question

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

这是生成链接的函数：

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 会工作，所以它必须具有动态生成链接的事实。

如何获取要检测的链接的点击次数？

Answer 1

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

$(document).ready(function() {

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

});

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

Answer 2

我明白了：

我找到了函数$ .delegate（）;

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

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

我只是从那里调用一个函数（console.log（）所在的函数），它将执行必要的操作。

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

Answer 3

我会按照以下方式完成。

你的方式：

 // 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..
    }

这种方式......我能够在一个地方找到我的链接行为只是我不需要在整个页面中搜索知道..锚点的点击事件......以及更多!!

无法检测到点击jQuery生成的链接

3 个答案: