Datatables - Jquery is not working in datatables in pagination

Question

I am trying to alert some data on the click on Create Quiz and it is working on the first page but on other pages, the alert is not working. I have attached the image for the table

I have tried to find on google, but nothing is available regarding this in datatables.

HTML CODE:

<table id="post-table" class="table display-table table-striped table-
bordered" width="100%" cellspacing="0">
<thead>
<tr>
  <th>Class</th>
  <th>Published</th>
  <th>Quiz</th>
  <th>Create Quiz</th>
  <th>View Quiz</th>
</tr>
</thead>
<tbody>
<?php foreach ($allposts as $allpost) { ?>
<tr>
  <td><?php echo $grades->getGradename($allpost['grade_id']); ?></td>
  <td><?php echo $others->milliToTime($allpost['created_at']); ?></td>
  <td><?php echo $quiz->quizCount($allpost['post_id']); ?></td>
  <td>
    <a href="#" data-post-id='<?php echo $allpost['post_id']; ?>' class="create-quiz"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
  </td>
  <td><a href="/admin/quiz/allquiz.php?post_id=<?php echo $allpost['post_id'] ?>"><i class="fa fa-eye" aria-hidden="true"></i></a></td>
</tr>
<?php } ?>
</tbody>
</table>

SCRIPT

$('#post-table').DataTable({
    "bSort": false
});

$('.create-quiz').click(function(e){
    e.preventDefault();
    alert("ss");
});

Where is your code? WHERE IS YOUR CODE? W H E R E I S T H E C O D E ? — Phiter, Jan 05 '18 at 17:24
The code is too much, so I will add the relevant code. I hope this will help — topper1309, Jan 05 '18 at 17:25
By the way if you're doing something like `$(".button").click(` it'll not work for dynamically added buttons. Try using `$('body').on('click', '.button')` instead — Phiter, Jan 05 '18 at 17:26
DataTable dynamically create the elements... Try the use of delegation... Like: `$(document).on([event],[selector],function(){...})`. — Louys Patrice Bessette, Jan 05 '18 at 17:27
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Louys Patrice Bessette, Jan 05 '18 at 17:30
That would be `$("#post-table").on("click",".create-quiz",function{...});` — Louys Patrice Bessette, Jan 05 '18 at 17:31
@LouysPatriceBessette, $("#post-table").on("click",".create-quiz",function(){...}); This worked. Thank you. So this means when things are dynamic, I should add to the parent — topper1309, Jan 05 '18 at 17:39
Yes... As @wezzy explained well, the events are binded on code parsing. Nothing is binded to inexistant yet elements. That is where [delegation](https://learn.jquery.com/events/event-delegation/) becomes usefull. — Louys Patrice Bessette, Jan 05 '18 at 17:41

score 2 · Accepted Answer · answered Jan 05 '18 at 17:33

2

Your problem is that on the page load your browser execute your javascript and associate your code to the buttons existing in the first page. but when you change page those elements that you see are new elements without any event listener attached to them.

The easiest solution is to listen events on a container element or even on the document. Something like:

$(document).on('click', '.create-quiz', function(){ console.log('here i am'); }

Should work

answered Jan 05 '18 at 17:33

wezzy

5,678
3
29
42

1

The closest static element is preferable to `document`... For OP, that is `#post-table`. ;) – Louys Patrice Bessette Jan 05 '18 at 17:34

Datatables - Jquery is not working in datatables in pagination

1 Answers1