Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  October 2023 Answer ✓

  The problem is you are creating the click event handler inside the loadDataTable() function so it creates a new instance of the event handler each time the function is called. Some options:

  1. Turn off, with jQuery off(), in the function before creating it.
  2. Move the event handler creation outside the function, like this updated test case:
     https://live.datatables.net/seyizaga/1/edit

  Note the change in selectors as the tbody does not exist on page load. Also the variable resultsTable is not available outside the loadDataTable() so you need to either get an instance of the Datatable API, as shown in the example, or create resultsTable as a global variable.

  Kevin
• metadev Posts: 17Questions: 6Answers: 0

  October 2023

  @kthorngren I have tried approach 2 before and couldn't get it to work. As the entire function failed to fire/execute altogether. I will look into it more. Thanks for the response.
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  October 2023

  As the entire function failed to fire/execute altogether.

  Check the browser's console for errors.

  Kevin
• metadev Posts: 17Questions: 6Answers: 0

  October 2023

  @kthorngren Moving the click event handler outside the loadDatatable() function scope didn't solve the issue in my case. As the table is dynamically created and not available in the DOM on the initial page load. So I assume the jQuery selector doesn't seem to work.

  I had to define a separate function clickHandler(data) and move the whole logic into it.

  function clickHandler(data) {
      // rest of code
      fun_get_qry("GET_EMP_PAYSLIP", data.childNodes[1].innerHTML);
      // rest of code
  }
  

  Then invoke it when the button is clicked

  columnDefs: [{
      "targets": 3,
      "defaultContent": "<button ... onclick='clickHandler(this.parentNode.parentNode);'>Select</button>"
  }],
  

  Thanks for the help.
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  October 2023

  So I assume the jQuery selector doesn't seem to work.

  What did you use? Assuming the table exists when the code to create teh event handler runs you should be able to move tbody into the selector parameter sent in the jQuery on() method.

  Kevin
• metadev Posts: 17Questions: 6Answers: 0

  October 2023

  Sorry for being late. I was out of station.
  I used jQuery as the selector like

  $('#example tbody').on('click', 'button', function() {
      // rest of code
  }
  

  and put this function outside the scope of the function with the Datatable initialization.
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  October 2023

  That would require #example tbody to resolve to an element. It sounds like that might not be the case for you. You could use:

  $(document).on('click', '#example tbody button', function() {
      // rest of code
  });
  

  Which would allow for the element being created dynamically.

  Allan
• metadev Posts: 17Questions: 6Answers: 0

  October 2023

  @allan Thanks for the suggestion. I will try this too.

  Dev