datatables, with pagination on click doesn't work

Question

I have this code in the bottom of the page:

$('.checkbox-class:checkbox').on('click', function () {
    alert($(this).val());
});

I have a datatable with a td with this input:

<input class="checkbox-class" type="checkbox" name="compartir[]" value="{{$row->id}}">

I can see the alert on each click of the checkbox of the first page, but when I move to the 2nd page, the script is not listening this clicks. But, if I reload the page, and move first to the 2nd page, then I do my first clicks, javascript can catch them well, but if I move to the 1st page, javascript doesn't listen them (on that, the 1st page)

I don't get it whay is happening this.

EDIT: A fiddle about it:

https://codepen.io/anon/pen/EBjNPW

Ryan Wilson · Accepted Answer · 2019-06-12 20:14:49Z

1

You can use delegation for the event by attaching it to the table itself and only firing on the specific class type, I take it you are using JQuery as you have it in your example above, so this should serve your needs, notice how the 2nd parameter of .on is the className of the checkbox items in the table, this will then fire anytime a checkbox with that className inside the parent table is clicked:

$('#yourTable').on('click', '.checkbox-class:checkbox', function(){
    alert($(this).val());
});

answered Jun 12, 2019 at 20:14

Ryan Wilson

10.9k3 gold badges23 silver badges46 bronze badges

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

4 Comments

Ryan Wilson Over a year ago

@pmirnd Glad to help. Have a good day. Also, this article explains what I used in my answer with more detail (learn.jquery.com/events/event-delegation)

pmiranda Over a year ago

Thanks. Can I do the same with each? I'm trying something like: $('#yourTable').each('click', '.checkbox-class:checkbox', function(){

Ryan Wilson Over a year ago

@pmirnd I don't believe that works with .each, .each is for iterating a set of elements. But if I'm wrong on that, feel free to let me know. From what I see in the documentation here (api.jquery.com/jquery.each), that isn't valid code in your example.

pmiranda Over a year ago

Thanks mate. I've just asked it here: stackoverflow.com/questions/56570595/…

Collectives™ on Stack Overflow

datatables, with pagination on click doesn't work

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related