如何防止在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() {

  $('.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;

        }

    });