javascript - 为什么 Jquery 代码被多次触发

Question

我有一个按钮可以从另一个页面打开模式。如果点击 .myBtn ，模式就会打开，模式会按预期关闭，并且我会收到点击警报，但是当再次按下 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');
   });
});

一旦在点击事件处理之外，您就可以安全地绑定(bind)它

$(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”或类似名称，但在编码时要具体说明；))