Button in DataTable doesn't respond to clicks on mobile

afairooz

I have a list of objects that have a button that opens up a modal on click and is rendered like this

render: function (data) {
return `<button class='info-button' data-id="${data}"><i class="fa-solid fa-circle-info"></i></button>`
}

And I'm assigning click like so after the table has been initialised

fnInitComplete: () => {
$(".info-button").on("click", (sender) => {
                    openProductModal($(sender.currentTarget).data("id"))
                })
}

This works completely fine on desktop but the moment I switch to mobile it stops working, initially I thought to try adding 'tap' to the handler but no luck, has anyone else ran into this problem / could anyone provide me with a fix? Thanks!

allan

I'd suggest using:

$('body').on("click", ".info-button", (sender) => {

Otherwise, only info-button elements that are on the page at the time would trigger the modal (i.e. any that were not shown due to paging would not).

That said, that might not fix the issue you are seeing. Possibly you are using Responsive? That fix should fix that as well, but it might be something else. If you post a link to a test case showing the issue, I can take a look.

Allan

afairooz

That did the trick and yes I am using responsive so that solved the issue, many thanks!