javascript - 绑定到 jQuery：输入不是触发事件

Question

这是我运行它时不起作用的代码。请告诉我缺少什么或哪里出错了。

$(':input').bind('keypress keydown keyup change', function() {
    var acho = parseFloat($(':input[name="acho"]').val(),10),
        alto = parseFloat($(':input[name="alto"]').val(),10),
        matl = parseFloat($(':input[name="material"]').val(),10);
        cat = parseFloat($(':input[name="category"]').val(),10);

    var v = '';

    if (!isNaN(acho) && !isNaN(alto) && !isNaN(matl)){
        v = cat*(matl / 100) / ((alto / 100) * (acho / 100));
    }

    $(':input[name="ml"]').val(v.toString());

​});​

Answer 1

您的变量定义存在问题：

matl = parseFloat($(':input[name="material"]').val(),10);

这一行后面应该有一个逗号，后面的变量赋值的 b/c。我会投入v只是为了很好的衡量。

var acho = parseFloat($(':input[name="acho"]').val()),
    alto = parseFloat($(':input[name="alto"]').val()),
    matl = parseFloat($(':input[name="material"]').val()),
    cat = parseFloat($(':input[name="category"]').val()),
    v = '';

（还从 中删除了无效的基数参数parseFloat）

更正的代码：

$(':input').bind('keypress keydown keyup change', function() {
    var acho = parseFloat($(':input[name="acho"]').val()),
        alto = parseFloat($(':input[name="alto"]').val()),
        matl = parseFloat($(':input[name="material"]').val()),
        cat = parseFloat($(':input[name="category"]').val()),
        v = '';

    if ( !isNaN(acho) && !isNaN(alto) && !isNaN(matl) ){
        v = cat*(matl / 100) / ((alto / 100) * (acho / 100));
    }

    $(':input[name="ml"]').val( v.toString() );
});

Answer 2

您的代码大多有效：

1. 确保它在document.ready处理程序中
2. 从中删除10radix 参数parseFloat- 不支持
3. 不要在keyXXX函数上注册 - 其中一些在按下的键被添加到输入值之前被调用
4. 改用 HTML5 的input事件 (and change)
5. 不要忘记测试cat[isNaN 啊，这是一个下拉列表 - 没关系]
6. 确保每个var都正确声明

我的修改最少的工作版本位于http://jsfiddle.net/alnitak/6hNQ2/和清理后的版本：

$(':input').bind('input change', function() {

    // don't repeat yourself - also strips whitespace
    function val(f) {
        var $el = $(':input[name="' + f + '"]');
        return parseFloat($.trim($el.val()));
    }

    var acho = val('acho'),
        alto = val('alto'),
        matl = val('material'),
        cat = val('category');

    if (isNaN(acho) || isNaN(alto) || isNaN(matl)) {
        return;
    }

    var v = cat * (matl / 100) / ((alto / 100) * (acho / 100));
    $(':input[name="ml"]').val(v);
});​

在http://jsfiddle.net/alnitak/4Xw3D/