时间戳

首页 > 解决方案 > 为什么 Jquery 代码被多次触发

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

问题描述

我有一个从另一个页面打开模式的按钮。一个模式是打开的，如果.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 -->

标签： javascriptjquery

解决方案

因为（见评论）：

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

推荐阅读