javascript - 如何初始化 jquery 方法的表单添加？

Question

我有一个表单，我正在尝试执行您经常在标签中看到的那种操作:第一个标签有一个文本字段，如果您在其中放入一些内容，则会出现一个新的类似文本字段收到另一个标签。等等。我通过为文本字段设置 jQuery .blur() 处理程序了解了这项工作的基础知识:输入值并且用户离开字段后，处理程序运行并将新字段插入表单中。该处理程序非常普通，类似于:

$('input.the_field_class').blur(function () { ... });

其中 .the_field_class 标识收集值的输入字段。

我的问题是，虽然在用户输入第一个值后新的文本字段很高兴地添加到表单中，但当用户在新添加的字段中输入内容然后离开它时，模糊处理程序不会触发。第一个字段继续正常工作，但第二个字段永远无法工作。 FWIW，我已经观察并避免了初始字段和添加字段之间的任何 ID 和名称冲突。我原以为 jQuery 会选择添加的文本字段，它与第一个文本字段具有相同的类标记，并像原始文本字段一样处理它，但也许我错了——我需要戳页面或页面的某些部分吗？它与某种 jQuery 初始化有关吗？谢谢!

Answer 1

如果没有在更多的上下文中看到您的代码，很难确定，但我最好的猜测是您将一个处理程序附加到第一个字段，但没有调用任何代码将其附加到新领域。如果是这种情况，您有几个选择，其中两个是:

1) 在 blur() 处理程序中，包含将 blur 处理程序附加到新创建的字段的代码。

2) 使用 jQuery 的 event delegation将处理程序附加到字段容器，并监听容器中任何字段上的 blur 事件:

<div class="tag-container">
  <input class="the_field_class" /> <!-- initial tag field -->
</div>

<script>
  var $tagContainer = $('.tag-container');
  var createNewField = function() {
    $tagContainer.append($('<input class="the_field_class" />');
  };
  $tagContainer.on('blur', 'input.the_field_class', createNewField());
</script>

哪个更好取决于您的用例，但我猜第二个选项更适合您，因为您不太可能处理来自容器的大量模糊事件。