Selecting multiple buttons in a table with jquery

JavaScript
1

I am trying to select two buttons that appear in each row of a table with the class “binder”. The table has an id of “report_table”.

When the buttons are selected I need to add onClick actions to them. The problem I’m having is getting the select to get the buttons.

Here’s what I’ve tried:

$('#report_table tr').find('.binder').each(function() {
 adding onClick code here
}
2

Welcome to the forum.

Using proper JavaScript, you can use querySelectorAll and addEventListener as shown here:

You do not necessarily have to give each button class “binder”, but if buttons have class “binder” then you could use document.querySelectorAll(".binder")

Sorry, I don’t use jQuery :grinning:

3

In jquery it is pretty easy

$('.binder').on('click', (event) =>
{
    const button = $(event.currentTarget);
    … do with the button what you want…
})
4

The problem is this is coming from a datatables call and I have to bind a uniquurl to each button before any on click.

The buttons are part of a dataTables generation.

Here is what the button looks like

<button type='button' title='Edit' class='binder' thisFunc='buildURL' thisUrl='VARIABLE'>

So, I thought I would need to select all the buttons and call a separate function that would create the onClick event for each.

$('#report_table tr').find('.binder').each(function() {
 $this = $(this);
thisFunc = $this.attr('thisFunc')'
$this.on('click', function() {
  window[thisFunc](this);
});
}

And this being the called function:

function buildUrl(t) {
  thisURL = $(t).attr('thisURL');
  editRecordURL = 'URL' + $(button).attr('buttonURL');
  window.location = editRecordURL;
}
5

Even if I don’t understand for 100% what you want to achieve, what is the problem with my solution?

$('.binder').on('click', (event) =>
{
    const button = $(event.currentTarget);
    button.attr('thisFunc')(parameter);
   buildUrl(button.attr('thisUrl');
   ... as I said you can do what you want with the button here...
})
1 Like
6

Your code is not doing anything when I use it. I added in a console.log to see if something will happen on click with a button and nothing is written.

7

Is there a js ‘attr’ method for the button element?
The button element has no attr property

8

You can add custom attributes to buttons. We’ve done it before.

9

You do have to use the data keyword instead of attr, though. I corrected that but it still doesn’t work.

$(‘.binder’).on(‘click’, (event) =>
{
const button = $(event.currentTarget);
button.data(‘thisFunc’)(parameter);
buildUrl(button.data(‘thisUrl’);
… as I said you can do what you want with the button here…
})

10

Apologies, I rejected using jQuery because I found it too restricting.
I thought that $(event.currentTarget) would return a html element and based my post on that assumption.
But I assume that jQuery requires a closing bracket for east opening bracket and not

buildUrl(button.data(‘thisUrl’);
11

I had corrected the missing bracket. Still doesn’t work.

12

Doesn’t work is not a useful error description.

Did you ever took a look at the web developer console if there is any useful error?

13

There are no errors in the console and adding in console.log alerts doesn’t show anything either, like the code is not seeing the buttons at all. By “not work” I mean that the buttons don’t produce any action in the console or the browser.

14

Just to show you that you are wrong

This is working as expected

15

I think there must be something about the way the html is returned from dataTables that makes your code not work.

For dataTables, the html is part of the ajax call, not already on the page.

16

You cannot add the handler before the elements are added to the Dom. So if your buttons are part of a jquery datatable Ajax call you need to add the handler in the draw callback

var table = $('#tableId').DataTable();

table.on( 'draw', function () {
    // your add handler code here
});
1 Like
17

Thank you! That was the key.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.