為什么Jquery代碼多次觸發

Question

我有一個從另一個頁面打開模式的按鈕。 如果單擊.myBtn則一個模態打開，模態按預期方式關閉，並且我收到單擊警報，但是當再次按下open modal時， open modal態關閉時，我收到2個單擊警報。 為什么會這樣？如何使dom中的所有元素“正常運行”，又避免腳本被多次觸發？ 非常感謝。

HTML

<button id="edit_credit" data-modal="myModal" class="btn btn-small btn-blue credit_btn">Open Modal</button> 

jQuery的

$(document).ready(function() { 
    //Open Modal
    $('.credit_btn').on('click', function() {    
        $('.modal-container').load('modal_test.php',
           function() {
               $('#myModal').modal({show:true});
           }
       );

       $(document).on("click", ".myBtn", function(){
           alert('click');
       });
   });
});//End of doc

Modal_test.php（部分）

         <button type="submit" id="btn"  data-dismiss="modal" value="submit" class="btn btn-blue pull-right myBtn">
            Save</button>
             <button type="button" class="btn btn-red pull-left" data-dismiss="modal">Close</button>
              </form>
    </div><!-- /.modal-footer -->

Answer 1

由於（請參閱評論）：

$('.credit_btn').on('click', function() {    
   // Everytime you click on .credit_btn
   // ...
   // You bind that event again (and again and again)
   $(document).on("click", ".myBtn", function(){
       alert('click');
   });
});

您可以在點擊事件處理之外將其安全綁定

$(document).ready(function() { 
    //Open Modal
    $('.credit_btn').on('click', function() {    
        $('.modal-container').load('modal_test.php',
           function() {
               $('#myModal').modal({show:true});
           }
       );
   });
   $(document).on("click", ".myBtn", function(){
       alert('click');
   });
});

（盡管我會將該類從“ myBtn”重命名為“ closeModal”或類似的名稱，但在編寫代碼時要具體說明；））