关闭模态后jQuery ajax加载多次

Question

我集成了一个引导模式并包含一个 .js 文件。js文件内容如下。.js 文件用于调用 Ajax。当我按下“加载更多”按钮时，它会触发一次 ajax 函数，这很好。但是，一旦我关闭模式并再次打开它，然后单击“加载更多”按钮，它就会触发 ajax 函数两次。如果我关闭模式并再次打开它并单击“加载更多”按钮，ajax 函数将触发三次。我的问题是：如果单击“加载更多”按钮，如何仅加载 ajax 函数一次？场景应该是：

1. 我点击了加载更多并调用了ajax。

2. 我关闭了模式并再次打开它。我单击了“加载更多”按钮并启动了 ajax（仅一次）。如果我再次单击“加载更多”按钮，它将再次调用 ajax 函数。

等等。

$(document).ready(function(){
   $(document).on('click','#btn-more',function(){
       var id = $(this).data('id');
       var token_csrf = $("#csrfToken").val();
       var base_path_loadata = $("input[name='base_path_loadata']").val(); 
       $("#btn-more").html("Loading....");
       $.ajax({
           url : base_path_loadata,
           method : "POST",
           data : {id:id, _token:token_csrf},
           dataType : "text",
           success : function (data)
           {
              if(data != '') 
              {
                  $('#remove-row').remove();
                  $('#load-data').append(data);
              }
              else
              {
                  $('#btn-more').html("No Data");
              }
           }
       });
   });  
});

<div id="remove-row">
                <button id="btn-more" data-id="{{$lastId}}" class="nounderline btn-block mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" ><span class="Cicon" ><i class="fa fa-paper-plane"></i></span> Load More </button>
            </div>

Answer 1

目前，您每次打开模式（并加载脚本）时都会添加一个事件处理程序。用于off('click')删除先前的事件处理程序：

$(document).off('click','#btn-more').on('click','#btn-more', function...)