jQuery click event on button added through datatable jquery plugin

Question

I am creating a table using the datatable plugin. Have added buttons to last column of the table. Issue: The button's on click is not triggered.

Javascript where table is created.

<script>
  $(document).ready(function() {
    $('#tagtbl').DataTable( {
        "paging": false,
        "info": false,
        "searching": false,
        "ajax": "../api/clienttagtbl.php?off=OFF002",
        "rowId": "id",
        "columns": [
            { "data": "tagname" },
            { "data": null, "defaultContent": '<button id="tagdelete" type="button" class="btn btn-danger btn-sm" >X</button>' }
        ]
    } );
  } );
</script>

Javascript where On click is called

<script>
$(document).ready(function() {
  $('#tagdelete').click( function(){
    console.log("hi"); // <<---This is not working
  });
  $('#tagtbl').click( function(){
    console.log("hi2");  //<<---This is working
  });
});
</script>

HTML

    <table id="tagtbl" class="table table-sm" >
      <thead>
        <tr>
          <th>Tag Name</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Tag Name</th>
          <th></th>
        </tr>
      </tbody>
    </table>

Hrishikesh · Accepted Answer · 2017-11-30 05:59:04Z

3

Try this

 $('#tagtbl').on('click','.tagdelete' function(){
    console.log("hi");
  });

i recommend you use a class for all the buttons instead of using id.

edited Nov 30, 2017 at 5:59

answered Nov 30, 2017 at 5:57

Hrishikesh

6323 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hrishikesh Over a year ago

Give a class to the buttons and use the above code.

Adarsh Madrecha Over a year ago

Any insights on why my method is not working. I am very new to jQuery

Hrishikesh Over a year ago

Could you just search for event delegation in jquery. That would give you enough idea about your issue.

laiju · Accepted Answer · 2017-11-30 06:00:05Z

1

you need to add the button click in datatable drawCallback function

$('#example').dataTable( {
    "drawCallback": function( settings ) {
       $('#tagdelete').click( function(){
    console.log("hi");
  });
  $('#tagtbl').click( function(){
    console.log("hi2");
  });
    }
} );

answered Nov 30, 2017 at 6:00

laiju

1,38310 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery click event on button added through datatable jquery plugin

Javascript where table is created.

Javascript where On click is called

HTML

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript where table is created.

Javascript where On click is called

HTML

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related