keyup 调用的不一致行为（调用函数以根据字段输入附加多个输入字段）答案

【问题标题】：Inconsistent behaviour for keyup call (calls function to append a number of input fields depending on field input)keyup 调用的不一致行为（调用函数以根据字段输入附加多个输入字段）
【发布时间】：2013-12-07 19:54:32
【问题描述】：

我有一个用户可以输入数字的字段。根据用户输入的数量，通过将额外的 HTML 附加到后续 div 来呈现许多额外的输入字段。

它通常工作得很好，输入“1”会导致添加 1 个字段，但是有些数字似乎不起作用： 1 = 1 个字段 2 = 2 个字段 3 = 2 个字段 () 4 = 3 个字段 5 = 3 个字段 () 6 = 4 个字段

就像某些数字没有注册一样，对于每个没有后续数字的数字，都比应有的数量少 n 个字段，其中 n 是该点之前未注册的较小数字的数量。

但是，有时输入 7 会跳转到 7 个字段的总正确值，...我看不到模式。

HTML
指定要附加的字段数的输入字段：

    <div class="number_input">
    <input  id="element_207" type="number" value="" name="q_207" /> 
    </div>'

    <div id="survey_details"></div>

jQuery 函数设计用于在模糊或键入或更改上述字段时触发，并在输入 HTML X 中添加 X 次

$(function() {
    var input = $('HTML TO BE APPENDED GOES HERE');
    var newFields = $('');

    $('#element_207').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields.length) {
                addFields(n);
            } else {
                removeFields(n);
            }
        }
    });

    function addFields(n) {
        for (i = newFields.length; i < n; i++) {
            var newInput = input.clone();
            newFields = newFields.add(newInput);
            newInput.appendTo('#survey_details');
        }
    }

    function removeFields(n) {
        var removeField = newFields.slice(n).remove();
        newFields = newFields.not(removeField);
    }
});

【问题讨论】：

标签： jquery html appendto

【解决方案1】：

你的代码可以正常工作

var input = $('<div>Append</div>');

但是，如果您的输入中有多个元素，例如

var input=$('<div>Line 1</div><div>Line 2</div>');

两个元素都被计算在内，所以如果你只添加了一次，你的长度将返回 2。将所有元素放在一个 <div> 中，它会起作用

var input=$('<div><div>Line 1</div><div>Line 2</div><div>');

http://jsfiddle.net/ZPUfy/

【讨论】：