Fire event when clicking on Bootgrid pagination button?

Question

I am having trouble getting an event to trigger when clicking on a button in the JQuery Bootgrid pagination element. I believe I am not able to target the element correctly for the handler to know I have clicked on the pagination. I have tried the following variations and more:

$(document).on('click', "#grid-footer .button", function () {
   alert("You clicked the pagination button!");
});
$(document).on('click', "#grid-footer a", function () {
   alert("You clicked the pagination button!");
})
$(document).on('click', "#grid-footer a .button", function () {
   alert("You clicked the pagination button!");
})
$(document).on('click', "#grid-footer .pagination", function () {
   alert("You clicked the pagination button!");
})
$(document).on('click', "#grid-footer .pagination > li > a", function () {
   alert("You clicked the pagination button!");
})    

None of these trigger the alert when clicking on a pagination button. Can anyone figure out the correct selector to trigger an event when clicking on the pagination? Here is a jsfiddle with the most simple possible bootgrid and a pagination element.

Answer 1

I haven't worked with Bootgrid, but I just had a quick look through the documentation. The reason your current code isn't working is that you're adding the eventListener before the content is generated. Hence, you should first add an eventListener for when the content has been loaded.

Within this eventListener you can then add an eventListener for your pagination, as follows;

var rowIds = [];
var grid = $("#grid").bootgrid({
    selection:true,
    multiSelect: true,
    rowSelect: true,
    rowCount: 3 
}).on("loaded.rs.jquery.bootgrid", function(e){
    console.log("Bootgrid Loaded")
    $("#grid-footer .button").on('click', function () {
        alert("You clicked the pagination button!");
    });
});

There are a number of eventListeners you could use, check out the documentation

Here's an updated JSFiddle with the whole thing working.