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, Mar 27 '19 at 10:27
Please have a look into [https://stackoverflow.com/questions/29652067/javascript-difference-between-document-onclick-selector-function] . Hope it gives you better idea on why to use document.on click — Jitendra Ahuja, Mar 27 '19 at 10:37

score 1 · Accepted Answer · edited Mar 27 '19 at 10:35

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 +"");
    }           
  });
});

score 1 · Answer 2 · answered Mar 27 '19 at 10:40

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 +"");
        }           
      });
    });

Problem with Click Event and ajax div refresh

2 Answers2