無法檢測到由jQuery生成的鏈接點擊

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

上述工程按預期和函數被調用在成功的功能在$就調用獲取數據分頁是盡頭對於。

下面是生成的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.. 
    } 

這樣...我能夠在一個地方找到我的鏈接行爲，只有我不需要在整個頁面中搜索才能知道..錨點的單擊事件......以及更多！