单击事件和 ajax div 刷新出现问题

Question

我正在尝试使用 ajax 调用刷新我的div，但由于某种原因它只在第一次点击时触发，我做错了什么。

我第一次单击按钮时，它可以正常工作，之后什么也没发生(加载部分脚本的其余部分工作正常(

这是我的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 +"");

            }           
        });

});

Answer 1

您必须添加选择器参数，否则事件将直接绑定而不是委托，这仅在元素已经存在时才有效(因此它不适用于动态加载的内容(。

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

Answer 2

我建议您单击此处以更好地了解为什么使用$(document(.on("click"，"YOUR SELECTOR"(...而不是 $("YOUR SELECTOR"(.on("click",..(。

所以在你的例子中，代码应该是这样的：

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