我的代码

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()方法会在焦点，点击等时在dynamic selector中搜索static selector。

像

一样使用它

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

将像普通.click()

一样工作

Answer 2

每次有一个keyup事件时它都会创建一个新字段 - 它没有链接到：last。我不确定如何解决它，但if($(this).val() != "")不起作用，因此输入的每个新字符将触发一个字段。如何使用$('.section-topic-field').change(function() { ...});呢？

Answer 3

您正在将事件侦听器绑定到文档就绪上的最后一个字段 - 这实际上是第一个（也是唯一的）字段。此事件侦听器在其存在的持续时间内保持在该确切字段上，或者直到您取消绑定侦听器。

请记住，每次提取密钥时，您都不运行所有引用的代码，只有您传递给侦听器的函数。

您需要以下逻辑流程：

创建第一个输入元素

一旦用户停止绑定*，就会将事件监听器绑定到该元素，如果当前的元素不为空，则会创建一个新元素

当该事件触发时：

创建新的输入元素

取消绑定您在2
中创建的原始侦听器
将新侦听器绑定到新的输入元素（具有相同的功能）

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

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

在需要时动态添加输入字段

我的代码

JS

HTML

问题

3 个答案: