Question

我正在尝试使用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);
        });
    });
});

Answer 1

每次鼠标进入#appointSubmit元素时，您都会将点击事件重新绑定到{{1}}，导致事件在用户单击按钮/链接一次时多次触发。

Answer 2

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

Answer 3

移除您真正不需要的mouseenter听众。

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

jQuery Submit多次发布

3 个答案: