How to prevent load file multiple times in jQuery

Question

Might my subject of this thread is same of multiple threads on stackoverflow but please believe me I have been read all the threads on this platform and and over the google but yet I not get the expected answer of my question below- When I clicking the button first time the modal div load the URL properly but after closing the modal div and hit the button to open again it load twice. means at every button click the modal load URL twice of previous load URL. Suppose if this time LOAD URL load 2 time next time its load 4 times and so on..

Even, I used return false but I don't the get the answer , I also read the answer of other thread but it not matching to my question codes.

Note: Please I am rules of stackoverflow policy and not making this thread after read all thread and not get answer then, Please not mark this Duplicate / Under Pending and any negative marks. Where I am doing wrong in my code I am new in this 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

You are binding event muilple time.

On click, you should just open modal. not bind. Bind should be done one time.

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

//Some dummy code

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