Problem with Click Event and ajax div refresh

Question

I'm trying to refresh my div using an ajax call, but for some reason it only fires in the first click, what am i doing wrong.

the first time i click the button it do everything fine, after that nothing happens (the loading part the rest of the script works fine)

here is the code of my javascript:

$('.btn-filtrar').on('click', function(){
    let id = $(this).closest('tr').data('id');
    let filter_type = $(this).closest('tr').data('type');
    let sort_order = document.getElementById(filter_type +'_sort-order_' + id).value;
    //console.log(id, filter_type, sort_order);


    $.ajax({
        url: "index.php?route=module/eot_filter/saveFilter&token=<?php echo $token; ?>",
        type: "POST",
        data: {
                id:id,
                filter_type:filter_type,
                sort_order:sort_order
            },
        success: function (result) {

                $("#"+ filter_type +"").load(" #"+ filter_type +"");


            }           
        });


});

use $(document).on('click', '.btn-filtrar', function(){}) instead of $('.btn-filtrar').on('click', function(){.. when need to perform event on Dynamic data. — Devsi Odedra
– Devsi Odedra, Commented Mar 27, 2019 at 10:27
Please have a look into [stackoverflow.com/questions/29652067/… . Hope it gives you better idea on why to use document.on click — Jitendra Ahuja
– Jitendra Ahuja, Commented Mar 27, 2019 at 10:37

laruiss · Accepted Answer · 2019-03-27 10:35:19Z

1

You have to add the selector parameter, otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content).

See http://api.jquery.com/on/#direct-and-delegated-events

$(document).on('click','.btn-filtrar' ,function(){
  let id = $(this).closest('tr').data('id');
  let filter_type = $(this).closest('tr').data('type');
  let sort_order = document.getElementById(filter_type +'_sort-order_' + id).value;
  //console.log(id, filter_type, sort_order);


  $.ajax({
    url: "index.php?route=module/eot_filter/saveFilter&token=<?php echo $token; ?>",
    type: "POST",
    data: {
      id:id,
      filter_type:filter_type,
      sort_order:sort_order
    },
    success: function (result) {
      $("#"+ filter_type +"").load(" #"+ filter_type +"");
    }           
  });
});

edited Mar 27, 2019 at 10:35

laruiss

3,8261 gold badge21 silver badges29 bronze badges

answered Mar 27, 2019 at 10:31

Deepak A

1,6361 gold badge9 silver badges16 bronze badges

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

Comments

Jitendra Ahuja · Accepted Answer · 2019-03-27 10:40:49Z

I would suggest you to Click Here to get the better idea on why to use $(document).on("click", "YOUR SELECTOR") ... instead of $("YOUR SELECTOR").on("click",..).

So in your case, the code should be something like :

$(document).on('click','.btn-filtrar' ,function(){
  let id = $(this).closest('tr').data('id');
  let filter_type = $(this).closest('tr').data('type');
  let sort_order = document.getElementById(filter_type +'_sort-order_' + id).value;
  //console.log(id, filter_type, sort_order);

    $.ajax({
        url: "index.php?route=module/eot_filter/saveFilter&token=<?php echo $token; ?>",
        type: "POST",
        data: {
          id:id,
          filter_type:filter_type,
          sort_order:sort_order
        },
        success: function (result) {
          $("#"+ filter_type +"").load(" #"+ filter_type +"");
        }           
      });
    });

Collectives™ on Stack Overflow

Problem with Click Event and ajax div refresh

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related