javascript - jQuery 模糊行为异常

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/>触发模糊事件的元素。您将模糊回调绑定(bind)到所有 :input元素，和 :input是一个 jQuery 扩展，包括输入、文本区域、选择和按钮元素 (see documentation) .

要解决此问题，您只需绑定(bind)到真实的 input元素，而不是 :input选择器。

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