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.

score 3 · Accepted Answer · answered May 15 '17 at 19:11

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.

Hm, but the technique of assigning event handlers OP has used - `$(document).on('click', "#grid-footer .button"` rather than `$('#grid-footer .button').click`- Isn't that supposed to be ok for elements that are added later? — James, May 15 '17 at 19:18
@James Yup, you appear to be right. I think the reasoning here is that the content is loaded in an `iframe`, I might be wrong there though? — Lennart, May 15 '17 at 19:27

Fire event when clicking on Bootgrid pagination button?

1 Answers1