Question

我有一个接受用户输入的输入字段。它有点像“To Dos”应用程序，用户可以在其中添加多个字段。我抓住“enter”键为用户创建一个新的输入字段，并给予该元素焦点，就像这样。

$(".input_duplicate").keyup(function (e) {
    if (e.keyCode == 13 && this.value.length > 0) {
        var $newElm = $('<input type="text" class="input_duplicate">');
        $newElm.insertAfter(this);
        $newElm.focus();
        $newElm.select();
    }
});

然而，$(".input_duplicate").keyup不绑定到新元素。我如何更改它以便$newElm对象收到keyup（）事件？

Answer 1

您有两个主要选择：

在添加新输入时，只需将事件挂钩即可。这里不需要代码示例。您可以将事件处理程序逻辑移动到命名函数中，以便重用它。

但我可能会选择：
您可以使用事件委派：
```
$(document).on("keyup", ".input_duplicate", function (e) {
    if (e.keyCode == 13 && this.value.length > 0) {
        var $newElm = $('<input type="text" class="input_duplicate">');
        $newElm.insertAfter(this);
        $newElm.focus();
        $newElm.select();
    }
});
```
将事件挂钩到容器（上面的document），但是如果事件通过与委托选择器匹配的元素（上面的.input_duplicate），则只调用您的处理程序。当它调用您的处理程序时，this是与选择器匹配的元素。

在上面的中，我是＆＃34;生根＆＃34;文件上的代表团，但如果有一个容器可以让所有这些输入更接近他们，那么你可能想要这样做。

事件委派示例：

＆＃13;

var counter = 1;
$("input[type=button]").click(function() {
  ++counter;
  $("#container").append(
    '<div><input type="text" id="i' + counter + '"></div>'
  );
});
$("#container").on("keyup", "input[type=text]", function() {
  snippet.log("keyup caught on " + this.id);
});

＆＃13;

<div id="container">
  <input type="button" value="Add">
  <div><input type="text" id="i1"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

＆＃13;

jQuery将keyup（）事件传递给新元素

1 个答案: