Question

我有点想做我想做但有一个问题：它为每一个改变的输入元素执行我的btnSave函数。这是我的代码：

$('#base-stats').on('change', 'input', function(){
    $('#btn-save').bind('click', btnSave);
});

function btnSave(){
    var valid = 1;
    character.currentChar.charName = $('#charName').val();
    character.currentChar.charLevel = $('#charLevel').val();
    character.currentChar.charLife = $('#charLife').val();
    character.currentChar.charES = $('#charES').val();
    character.currentChar.charInt = $('#charInt').val();
    character.currentChar.charStr = $('#charStr').val();
    character.currentChar.charDex = $('#charDex').val();

    $('#base-stats input').each(function(){
        if ($(this).val().length <= 0) {
            console.log('Null field found at '+$(this).attr('id'));
            $('#btn-save').unbind('click', btnSave);
            valid = 0;
        }
    });

    if (valid) {
        $.post('checkchar.php',
            {c:character.currentChar.charName},
            function(data){
                if (data == 'null') {
                    $.post('savechar.php',
                        {c:character.currentChar},
                        function(data){
                            alert('Character successfully saved to the database.');
                        }
                    );
                }
                else {
                    if (confirm('Duplicate character name exists in the database! Overwrite current character?')) {
                        $.post('savechar.php',
                            {c:character.currentChar},
                            function(data){
                                alert('Character successfully updated in the database.');
                            }
                        );
                    }
                }
            }
        );
    }
}

所以它当前的工作方式，我的“保存按钮”div开始没有任何约束，然后当一个表单输入字段更改时，它将我的btnSave处理函数绑定到div时单击它。因此，为了说明我的问题，我可以说我在7个输入字段中的2个中输入了两个值。然后控制台将两个字段更改后两次记录5个空字段：

Null field found at charLife global.js:80
Null field found at charES global.js:80
Null field found at charInt global.js:80
Null field found at charStr global.js:80
Null field found at charDex global.js:80
Null field found at charLife global.js:80
Null field found at charES global.js:80
Null field found at charInt global.js:80
Null field found at charStr global.js:80
Null field found at charDex global.js:80

如何防止这种情况发生，仍然确保没有空字段发布到我的服务器？或者我应该使用不同的方法，例如检查savechar.php文件中的空数组值？我宁愿尽量减少与服务器的交互，以节省时间。

Answer 1

你的btnSave（）方法似乎没问题。您的问题是每次＃base-stats更改时，您都会将该方法绑定到＃btn-save的click事件。你为什么这样做？您所要做的就是在开头绑定一次，然后只要单击＃btn-save就会运行btnSave（），并且您的验证检查将启动并执行您想要的操作。只需将脚本的顶部更改为此（我在那里保留了不必要的内容并将其注释掉，以便您可以看到）：

$('#btn-save').click(btnSave);
/**$('#base-stats').on('change', 'input', function(){
    $('#btn-save').bind('click', btnSave);
});*/

如果表单字段为空，则删除单击处理程序

1 个答案: