Can't detect click on links generated by jQuery - jquery-selectors

Question

I'm generating some links for pagination of some data.
Here's the function that generates the links:
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>First Page | Prev Page | ');
} else if (targetPage = 1) {
$('#pagination').append('<br>First Page | Prev Page | ');
}
// 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(' | Next Page | Last Page');
} else if ( targetPage === numPages) {
$('#pagination').append(' | Next Page | Last Page');
}
}
The above works as intended and the function is called at the end of the success function in an $.ajax call that gets the data that the pagination is for.
Here's what the generated HTML looks like if it's not on the first or last page:
<div id="pagination">
<br>
First Page |
Prev Page |
<label id="currentPage">2</label> |
Next Page |
Last Page
</div>
What I need to do is get the ID of the link that is clicked on so I can take the appropriate action. I've tried this:
$('#pagination a').click(function() {
console.log(this.id);
});
and I've also tried this:
$('#pagination a').on('click', function() {
console.log(this.id);
});
But neither works - well, if I put the generated HTML and the above jQuery in a jsFiddle it does work, but it doesn't in the full code.
I am especially surprised that $.on() doesn't work in this case, as I use that function elsewhere in my code.
If I put the generated HTML as HTML in the page itself, the jQuery does work, so it's got to have something with the fact that the links are generated dynamically.
How can I get clicks on those links to be detected?

Answer 1

I figured it out:
I found the function $.delegate();
I added this code at the end of the BuildPaginationNav() function:
$('#pagination').delegate('a', 'click', function() { console.log(this.id); });
I'll just call a function from there (where the console.log() is) that will perform the necessary actions.
If there's a different (or even better) way, let me know!

Answer 2

Your links are not created yet when binding event. You need to bind live action on some existing element.
$(document).ready(function() {
$("#pagination").on('click', 'a', function() { .... });
});
The '#pagination' element is supposed to be available in time of binding event. It's called delegated event - http://api.jquery.com/on/

Answer 3

I would have done it in following way.
Your way:
// Only use prev page and first page buttons/links if not on first page
if (targetPage > 1) {
$('#pagination').append('<br>First Page | Prev Page | ');
} else if (targetPage = 1) {
$('#pagination').append('<br>First Page | Prev Page | ');
}
My Way:
// Only use prev page and first page buttons/links if not on first page
if (targetPage > 1) {
$FirstPage=$('First Page');
$FirstPage.click(function() { .... });
$('#pagination').append($FirstPage);
//same for Prev page...
} else if (targetPage = 1) {
// same as above..
}
This way...i'm able to locate my links behaviour at one place only i do not need to search in the whole page to know.. what click event for anchors..and many more !!