layui点击提交两次的问题

Posted 2023-05-14 djiz

一次layui form 提交时点一次提交了两次，排查发现加载了两次layui的原因 <script src="__TMPL__/layui/layui.js"></script> 

jquery绑定click事件出现点击一次执行两次的问题

第一种：事件点击触发两次

$(".button").click(function(e){
    e.stopPropagation();   
　　//表示阻止向父元素冒泡；阻止默认行为，可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了
    e.preventDefault();    
　　//阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交或者a标签）；
　　阻止事件冒泡，事件是可以冒泡的，为防止事件冒泡到DOM树上，不触发任何前辈元素上的事件处理函数，
　　可以用 event.isPropagationStopped()来确定stopPropagation是否被调用过了
});

 第二种：当ajax时成功的触发事件，如果多次ajax就会有多个事件存放，然后你点击时，就会触发你点击的ajax的数目的事件。解决方法就是在ajax成功后先取消事件（$(‘.button‘).unbind();），再执行事件。

$.ajax({
　　 type: "POST",
    url:"/index.php",
    data:$(‘#hform_main‘).serialize(),
    dataType:‘json‘,
    cache:false,
    error: function(request) {
        alert("Please refresh the page and try again.");
    },
    success: function(data) {
        if(data.over){
            $(".button").unbind();
            $(".button").click(function(){
                alert(‘alert over‘);
            });
        }
});