Javascript jQuery提交已发布多次

我试图使用jQuery提交一个通过模式动态加载的表单，但是我在多次提交时遇到了问题。此代码已发布多次，有人能解释原因吗？多谢各位

var convArrToObj = function(array){
    var thisEleObj = new Object();
    if(typeof array == "object"){
        for(var i in array){
            var thisEle = convArrToObj(array[i]);
            thisEleObj[i] = thisEle;
        }
    }else {
        thisEleObj = array;
    }
    return thisEleObj;
};
var serialize = function(obj) {
    var str = [];
    for(var p in obj)
        if (obj.hasOwnProperty(p)) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
    return str.join("&");
};
var events = [];
var appointments = [];
var formData = [];
$('#newAppointment').on('click', function(){
    $( ".modal-content" ).load( "api/calendar/appointment.php", { personId: $(this).attr('personId')}, function(){
        $(".chosen-select").chosen({width:'100%',placeholder_text_multiple:'Select People'});
        $(".datepicker").pickadate({format: 'mm/dd/yyyy' });
        $(".timepicker").pickatime({format: 'HH:i' });
    });
});
$('#page-wrapper').on('mouseenter', '#appointform', function(){
    $('#appointSubmit').on('click', function(event){
        event.preventDefault();
        $('#appointSubmit').prop('disabled',true);
        $("#appointform select").each(function() {
            var fieldName = $(this).attr("name");
            var fieldVal = $(this).val();
            if(typeof fieldVal === 'undefined'){
                fieldVal = "";
            }
            if(! fieldVal ){
                fieldVal = "";
            }
            if($(this).val() === "? undefined:undefined ?"){
                fieldVal = "";
            } 
            formData[fieldName] = fieldVal;
        });
        $("#appointform input").each(function() {
            formData[this.name] = this.value;
        });
        $("#appointform textarea").each(function() {
            formData[this.name] = this.value;
        });
        $('#modal').modal('hide');
        $.post('api/calendar/post', convArrToObj(formData), function(response){
            console.log(response);
        });
    });
});

---

mouseenter事件可能会触发多次。每次鼠标进入或重新进入表单时，都会将事件处理程序重新添加到表单中。您应该在load回调函数中为按钮设置onsubmit/onclick处理程序一次，以防止这种情况发生。

mouseenter事件可能会多次触发。每次鼠标进入或重新进入表单时，都会将事件处理程序重新添加到表单中。您应该在load回调函数中为按钮设置一次onsubmit/onclick处理程序，以防止这种情况发生。

每次鼠标进入

#页面包装器

元素时，您都将click事件绑定到

#appointSubmit

，当用户只单击一次按钮/链接时，导致事件多次触发。

每次鼠标进入

#页面包装器

元素时，您都将单击事件绑定到

#任命提交

，当用户只单击一次按钮/链接时，导致事件多次触发。

删除

mouseenter

listener您真的不需要它

var convArrToObj = function(array){
        var thisEleObj = new Object();
        if(typeof array == "object"){
            for(var i in array){
                var thisEle = convArrToObj(array[i]);
                thisEleObj[i] = thisEle;
            }
        }else {
            thisEleObj = array;
        }
        return thisEleObj;
    };
    var serialize = function(obj) {
        var str = [];
        for(var p in obj)
            if (obj.hasOwnProperty(p)) {
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
        return str.join("&");
    };
    var events = [];
    var appointments = [];
    var formData = [];
    $('#newAppointment').on('click', function(){
        $( ".modal-content" ).load( "api/calendar/appointment.php", { personId: $(this).attr('personId')}, function(){
            $(".chosen-select").chosen({width:'100%',placeholder_text_multiple:'Select People'});
            $(".datepicker").pickadate({format: 'mm/dd/yyyy' });
            $(".timepicker").pickatime({format: 'HH:i' });
        });
    });
        $('#appointSubmit').on('click', function(event){
            event.preventDefault();
            $('#appointSubmit').prop('disabled',true);
            $("#appointform select").each(function() {
                var fieldName = $(this).attr("name");
                var fieldVal = $(this).val();
                if(typeof fieldVal === 'undefined'){
                    fieldVal = "";
                }
                if(! fieldVal ){
                    fieldVal = "";
                }
                if($(this).val() === "? undefined:undefined ?"){
                    fieldVal = "";
                } 
                formData[fieldName] = fieldVal;
            });
            $("#appointform input").each(function() {
                formData[this.name] = this.value;
            });
            $("#appointform textarea").each(function() {
                formData[this.name] = this.value;
            });
            $('#modal').modal('hide');
            $.post('api/calendar/post', convArrToObj(formData), function(response){
                console.log(response);
            });
    });

---

删除

mouseenter

listener您真的不需要它

var convArrToObj = function(array){
        var thisEleObj = new Object();
        if(typeof array == "object"){
            for(var i in array){
                var thisEle = convArrToObj(array[i]);
                thisEleObj[i] = thisEle;
            }
        }else {
            thisEleObj = array;
        }
        return thisEleObj;
    };
    var serialize = function(obj) {
        var str = [];
        for(var p in obj)
            if (obj.hasOwnProperty(p)) {
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
        return str.join("&");
    };
    var events = [];
    var appointments = [];
    var formData = [];
    $('#newAppointment').on('click', function(){
        $( ".modal-content" ).load( "api/calendar/appointment.php", { personId: $(this).attr('personId')}, function(){
            $(".chosen-select").chosen({width:'100%',placeholder_text_multiple:'Select People'});
            $(".datepicker").pickadate({format: 'mm/dd/yyyy' });
            $(".timepicker").pickatime({format: 'HH:i' });
        });
    });
        $('#appointSubmit').on('click', function(event){
            event.preventDefault();
            $('#appointSubmit').prop('disabled',true);
            $("#appointform select").each(function() {
                var fieldName = $(this).attr("name");
                var fieldVal = $(this).val();
                if(typeof fieldVal === 'undefined'){
                    fieldVal = "";
                }
                if(! fieldVal ){
                    fieldVal = "";
                }
                if($(this).val() === "? undefined:undefined ?"){
                    fieldVal = "";
                } 
                formData[fieldName] = fieldVal;
            });
            $("#appointform input").each(function() {
                formData[this.name] = this.value;
            });
            $("#appointform textarea").each(function() {
                formData[this.name] = this.value;
            });
            $('#modal').modal('hide');
            $.post('api/calendar/post', convArrToObj(formData), function(response){
                console.log(response);
            });
    });

---

在黑暗中拍摄，没有看到html，但是否有可能绑定提交函数两次？也许是表格和按钮？否则，当您说multiple时，是指每次单击两次还是更多？它提交3-4次，每次

mouseenter

firesshot在黑暗中，没有看到html，但是否可能将提交函数绑定两次？也许是表格和按钮？否则，当您说multiple时，是每次单击两次还是更多？它提交3-4次，每次

mouseenter

firesthis实际上不起作用，问题是我必须将jquery委托给documentready上的一个元素，然后指示它查找子dom元素。不幸的是，这似乎是导致多次提交的原因。实际上，这不起作用，问题是我必须将jquery委托给documentready上的一个元素，然后指示它查找子dom元素。不幸的是，这似乎是导致多次提交的原因为什么我不需要它？如果我删除

mouseenter

，jquery将不起作用，因为元素

#appointSubmit

在文档的dom中不存在，为什么我不需要它？如果我删除

mouseenter

，jquery就不起作用了，因为元素

#appointSubmit

在文档的dom中不存在。那么我如何让jquery在动态内容上执行，而不让表单多次提交？你能提供你的页面或一些HTML片段吗？对不起，只需阅读文档就绪中不存在的关于

#任命提交
的部分。在已存在的父元素上绑定click事件，并使用选择器筛选特定子元素的事件。这里有一个例子：-
#child
在您的情况下将是
#appointSubmit
在您指出每次都在重新绑定之后，这是有效的。把你的回答标记为答案，因为你一开始就指出了。谢谢。那么，我如何让jquery在动态内容上执行而不让表单多次提交呢？您能提供一些页面或HTML片段吗？对不起，请阅读文档准备就绪中不存在的关于
#appointSubmit
的部分。在已存在的父元素上绑定click事件，并使用选择器筛选特定子元素的事件。这里有一个例子：-
#child
在您的情况下将是
#appointSubmit
在您指出每次都在重新绑定之后，这是有效的。把你的回答标记为答案，因为你一开始就指出了。非常感谢。