Question

我正尝试使用ajax调用刷新div，但由于某些原因，它只会在首次点击时触发，这是我做错了。

我第一次单击按钮时，它一切都很好，在此之后什么也没发生（脚本其余部分的加载部分工作正常）

这是我的javascript代码：

GeomFit <- ggproto("GeomFit", GeomRect,
                   setup_data = environment(GeomBar$setup_data)$f)

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

我建议您Click Here来更好地了解为什么使用$（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 +"");
        }           
      });
    });

点击事件和ajax div刷新问题

2 个答案: