javascript - 如何防止在 jQuery 中多次加载文件

Question

我这个线程的主题可能与 stackoverflow 上的多个线程相同，但请相信我，我已经阅读了该平台和谷歌上的所有线程，但我还没有得到下面问题的预期答案 -当我第一次单击按钮时，模式 div 正确加载 URL，但在关闭模式 div 并点击按钮再次打开后，它会加载两次。意味着在每个按钮上单击模态加载 URL 是先前加载 URL 的两倍。假设这次 LOAD URL 加载 2 次，下次加载 4 次，依此类推。

甚至，我使用了return false，但我没有得到答案，我也阅读了其他线程的答案，但它与我的问题代码不匹配。

注意:请注意，我是 stackoverflow 政策的规则，在阅读所有线程后不会创建此线程，然后没有得到答案，请不要标记此重复/待处理和任何负面标记。 我在代码中做错的地方我是这个调试的新手。

$('#reveal_AddSenderMod').on('click', function() {
  $('.modal.fade.modal-style2').on('shown.bs.modal', function() {
    $(this).find('.modal-body').find('#loadURL').load('./loadPage.html').fadeIn('slow');
    return false;
  });
})

<link rel="stylesheet" href="http://shashani-humanth.github.io/Notebook-AdminPanel/css/bootstrap.css" type="text/css" />

<button type="button" id="reveal_AddSenderMod" data-toggle="modal" data-target="#modal-style2" style="width:75px; display: block;margin: 0 auto;" data-keyboard="false" data-backdrop="static">OPEN MODEL</button>

<div class="modal fade modal-style2 hidden-print" id="modal-style2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">
        <div class="row">
          <div id="loadURL" class="animated fadeIn"></div>
          <button data-dismiss="modal">CLOSE MODEL</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
 $(document).on("click", "button[data-dismiss='modal']", function(e){
  e.preventDefault();
  $('div.modal-body').find('div#loadURL').find('div.senderIDAdd_module').empty(); //remove() is also not works
 });
 </script>
<script src="http://shashani-humanth.github.io/Notebook-AdminPanel/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="http://shashani-humanth.github.io/Notebook-AdminPanel/js/bootstrap.js"></script>

Answer 1

您多次绑定(bind)事件。

单击时，您应该打开模式。不绑定(bind)。绑定(bind)应该完成一次。

$('#reveal_AddSenderMod').on('click', function() {
  $('.modal.fade.modal-style2').modal('show');
})

$('.modal.fade.modal-style2').on('shown.bs.modal', function() {
    $(this).find('.modal-body').find('#loadURL').load('./loadPage.html').fadeIn('slow');
    return false;
  });

//一些虚拟代码

$('body').on('click', '#on-submit-senderid', function() {
        if(localStorage.getItem("review_submitte")) {
          return;
        }
        if(!$('input[name="sender_id_confirm"]').is(':checked')) {
            mkNoti(['Ops!'],['Please agree the condition to get Custom Sender ID'],{ sound: true, status:['danger'],dismissable: false });
            return;
        } else {
            $.ajax({
                            ...
                success: function(response) {
                    if (response.status == 'success') {
                        //SUCCESS
                        return false;
                    } else {
                        mkNoti([response.title],[response.message],{ sound: true, status:[response.status],dismissable: false });
                        return false;
                    }
                    localStorage.setItem("review_submitte", "true")
                }
            });
            hide_loader();
            return false;
        }
    });