Question

我想要监听表单中每个输入字段的blur事件，但是当我在计算后重置表单时，再次当我获得输入字段的焦点时，它会触发blur事件两次，一个具有空值，一个具有输入值。

<form id="form">
    Total Ore to be Mined:
    <input type="number" name="TOmined" value="0" autofocus> Tons
    <br> Total Waste to be Mined:
    <input type="number" name="TWmined" value="0"> Tons
    <br> Number of Operating Days/Year:
    <input type="number" name="OperatingDays" value="0"> Days
    <br> Number of Operating Years:
    <input type="number" name="OperatingYrs" value="0"> Years
    <br>

</form>
<script>
    var arr = {};
    //  {"TOmined": inputValue}
    $(document).ready(function() {
        $(":input").blur(function(e) {
            var k = e.target.name;
            var v = e.target.value;
            arr[k] = v;
            console.log(k, v); // **runs two times one with empty string**
            // one with original value 

        })
    });

    function calculate() {
        var sum = 0;
        // your logic
        console.log(arr);

        // end logic
        if (!jQuery.isEmptyObject(arr)) {
            for (v in arr)
                sum += parseInt(arr[v]);
            console.log(sum);
        }
        $('#form').trigger("reset");
        //  $('#result').html(value to be displayed + ' tons/day');
        arr = {};
    }
</script>

Answer 1

发现问题的最快方法是将此行添加到模糊回调中：

console.log(e.target);

...它将显示模糊的元素。在这种情况下，它是触发模糊事件的<button/>元素。您将模糊回调绑定到所有:input元素，而:input是一个jQuery扩展，包含输入，textarea，select和按钮元素(see documentation)。

要解决此问题，您只想绑定到真正的input元素，而不是:input选择器。

$('input').blur(function (e) {
    // ...
});

jQuery模糊表现得很奇怪

1 个答案: