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

您可以在点击事件处理之外安全地绑定一次

$(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'或类似的东西，但在编码时要具体;）

为什么Jquery代码不止一次被触发

1 个答案: