Javascript button event not working after page 1-CodePudding

Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]

//creation method of the table

var volunteerTable = $('#volunteerTable').DataTable({
     paging: true,
     pagingType: 'simple_numbers',
     columns: [ title:"First Name", title:"Last Name", title:"Email"



The trash can button code:
$('.buttonVDelete').click(function () {
    
//fill out the fields
//open the delete volunteer modal
//prepare data to send

}

CodePudding user response：

When you use click() you are reading the elements available at the moment of loading the page.

In order to read new rendered elements, you must use on

$(document).on('click','.buttonVDelete', function () {
  // Your code
});

CodePudding user response：

is it jQuery required? maybe better vanilla javascript:

document.querySelector('.buttonVDelete').addEventListener('click', 
  function(){

  })

Most of modern browser can easy deal with es5/es6

I hope I helped.