0

我有一些我想做的工作，但有一个问题：它为每个变化的输入元素执行我的 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文件中的空数组值吗？我宁愿尽量减少与服务器的交互以节省时间。

4

1 回答 1

1

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

$('#btn-save').click(btnSave);
/**$('#base-stats').on('change', 'input', function(){
    $('#btn-save').bind('click', btnSave);
});*/
于 2013-04-25T23:47:58.757 回答