需要时动态添加输入字段

Question

我正在尝试根据需要将额外的输入字段添加到我的 HTML 表单中。这是我的代码：

我的代码

JS

$(document).ready(function(e) {
    var i = $('.form-inputs input').size() + 1;

    $('.section-topic-field').last().bind('keyup', function(e) {
        if($(this).val() != "") {
            var html_new_field = '<input name="txtTopicName' + i + '" class="section-topic-field" type="text" onfocus="this.value=\'\'" placeholder="topic name #' + i + '" /><br />';

            $('.form-inputs').append($(html_new_field).fadeIn('slow'));

            i++;
        }
    });
});

HTML

        <input name="txtSection" type="text" onfocus="this.value=''" placeholder="sections"/><br/>
    <div class="form-inputs">
        <input name="txtTopicName1" class="section-topic-field" type="text" onfocus="this.value=''" placeholder="topic name #1"/><br />
     </div>
    <!--<button class="btn btn-mini btn-primary" type="submit">Create</button>-->
</form>

问题

但是，函数 ALWAYS 在第一个输入字段上触发，因此在第一个输入字段中键入，例如，4 个字母，将生成 4 个输入字段。然后，当您在实际的最后一个输入字段（在本例中为第 4 个）输入内容时，什么也没有发生。所以出于某种原因$('.section-topic-field').last() 总是选择第一个输入字段。

我也尝试了:last 选择器和:last-child，但结果是一样的

有什么帮助吗？

谢谢！

Answer 1

由于您要动态添加input，我建议您使用.on()。

var i = $('.form-inputs input').size() + 1;

$('.form-inputs').on('keyup', '.section-topic-field:last', function (e) {
    if ($(this).val() != "") {
        var html_new_field = '<input name="txtTopicName' + i + '" class="section-topic-field" type="text" onfocus="this.value=\'\'" placeholder="topic name #' + i + '" /><br />';
        $('.form-inputs').append($(html_new_field).fadeIn('slow'));
        i++;
    }
});

Fiddle here

很遗憾，我不擅长解释，但在这里您可以找到on() 方法的简短摘要。 Stackoverflow link;

正如上面的答案所说

$("static selector").on('click', "dynamic selector", fn);

给定上面的参数，on() 方法在获得焦点、点击等时会在static selector 中搜索dynamic selector。

像这样使用它

$("static selector").on('click', fn);

会像普通的.click()一样工作

Answer 2

每次你有一个 keyup 事件时它都会创建一个新字段 - 它没有链接到 :last。我不知道如何修复它，但if($(this).val() != "") 在那里不起作用，因此输入的每个新字符都会触发另一个字段。改用$('.section-topic-field').change(function() { ...}); 怎么样？

Answer 3

您正在将事件侦听器绑定到存在于文档就绪上的最后一个字段——这实际上是第一个（也是唯一一个）字段。此事件侦听器在其存在期间一直停留在该确切字段上，或者直到您取消绑定侦听器为止。

请记住，您不是在每次提起键时都运行引用的整个代码，只运行您传递给侦听器的函数。

您需要以下逻辑流程：

1. 创建第一个输入元素
2. 一旦用户停止绑定*，将事件侦听器绑定到该元素，如果当前元素不为空，则会创建一个新元素
3. 当该事件触发时：
   • 创建一个新的输入元素
   • 解绑你在2中创建的原始监听器
   • 将新的侦听器绑定到新的输入元素（具有相同的功能）

*keyup 在这种情况下不是一个很好的绑定事件，因为一旦用户输入第一个字母就会触发。您可能应该考虑改用blur，或者在触发事件之前等待几秒钟（参见setTimeout）。或者，您可以使用按钮让用户明确请求新的输入字段？

如果您需要一些示例，请告诉我。