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

您正在綁定事件多次。

單擊時，您應該只打開模態。 不綁定。 綁定應該做一次。

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