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

Question

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

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

注意：请我是 stackoverflow 政策的规则，在阅读所有线程后不做这个线程，然后没有得到答案，请不要标记这个重复/未决和任何负面标记。我在代码中做错的地方是我在这个 Debug 中的新手。

$('#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

您正在绑定事件多时间。单击时，您应该只打开模式。不绑定。绑定应该做一次。$('#reveal_AddSenderMod').on('click', function() {&nbsp; $('.modal.fade.modal-style2').modal('show');})$('.modal.fade.modal-style2').on('shown.bs.modal', function() {&nbsp; &nbsp; $(this).find('.modal-body').find('#loadURL').load('./loadPage.html').fadeIn('slow');&nbsp; &nbsp; return false;&nbsp; });//一些伪代码$('body').on('click', '#on-submit-senderid', function() {&nbsp; &nbsp; &nbsp; &nbsp; if(localStorage.getItem("review_submitte")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if(!$('input[name="sender_id_confirm"]').is(':checked')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mkNoti(['Ops!'],['Please agree the condition to get Custom Sender ID'],{ sound: true, status:['danger'],dismissable: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (response.status == 'success') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //SUCCESS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mkNoti([response.title],[response.message],{ sound: true, status:[response.status],dismissable: false });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem("review_submitte", "true")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hide_loader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });