0

我正在尝试根据需要将额外的输入字段添加到我的 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 个输入字段。然后，当您在实际的最后一个输入字段（在本例中为第四个）输入内容时，什么也没有发生。所以由于某种原因$('.section-topic-field').last()总是选择第一个输入字段。

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

有什么帮助吗？

谢谢！

4

3 回答 3

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++;
    }
});

在这里提琴

不幸的是，我不擅长解释，但在这里您可以找到该on()方法的简短摘要。堆栈溢出链接；

正如上面的答案所说

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

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

像使用它

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

会像正常人一样工作.click()

于 2013-05-17T11:09:10.747 回答
0

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

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

您需要以下逻辑流程：

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

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

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

于 2013-05-17T11:09:59.320 回答
0

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

于 2013-05-17T10:59:18.973 回答