Jquery 的 on() 问题

Question

我创建了一个 fiddle 来添加两个值并输出该值。 fiddle 在这里:

http://jsfiddle.net/Q8KVC/2215/

当我在输入框(G7)中输入值时，值会添加到 G8 并显示输出。但是当我使用退格键删除输入框中的值时，G8 中的值不会更改为默认值(0)。我尝试过 .on() 和 .bind()。但没有运气。请帮我找出问题所在。

我正在使用以下事件:

 $("#g7").on("input keyup keydown keypress change blur", function() {});

谢谢。

Answer 1

何时 #g7为空，parseFloat 返回一个空字符串，因此对其进行加法运算会得到 NaN 。此外，您不需要所有这些事件，事实上，拥有所有这些事件意味着您的函数每次按键都会触发多次。 keyup事件应该足够了，除非该输入字段正在外部更新，在这种情况下您可以使用 change事件也是如此。不过，如果您正在进行外部更新，我更愿意通过执行类似 $('#g7').trigger('keyup'); 的操作来强制更新。手动触发事件。

在您的 jQuery 中尝试一下此代码，它看起来工作正常:

$(document).ready(function() {
    $("#g7").on("keyup", function() {
        var g6 =$('#g6').text();
        var g7 =$('#g7').val() || 0;
        var g8 =$('#g8').text();

        var noCommasg6 = $('#g6').text().replace(/,/g, ''),
        asANumber = +noCommasg6;

        var sum=parseFloat(noCommasg6)+parseFloat(g7);
        if (!isNaN(sum))
        {
            $("#g8").text(sum);
            $('#g8').number( true, 2 );
        }
    });
});

其他一些注意事项:

• $('#g8').number( true, 2 );错误并显示消息 $(...).number is not a function
• 您可能想要限制 #g7 中可以输入的值通过更改 HTML input type="..."至number (而不是 text )，这样字母字符就不会渗入