Question

我创建了一个函数，使用回车键聚焦下一个输入并禁用表单上的提交。它工作正常，但当我使用appendTo函数添加一个输入字段时，它将重新激活我的表单上的提交功能。我想用输入键而不是tab键来聚焦输入字段。

这是我的功能：

$('input').keydown(function (e) {
    if (e.which === 13) {
        var index = $('input').index(this) + 1;
        $('input').eq(index).focus().val("");
        return false;
    }
});

我的appendTo功能

var inputs = $('<input type="text" name="inputBasic[]" value="" class="form-control" />');
inputs.appendTo($("#dc_step_inputs"));

添加动态输入字段时，如何删除提交功能？谢谢你的回答！

Answer 1

您正在将keydown事件处理程序绑定到一组静态元素（不包括在附加事件处理程序后动态添加的任何元素），使用委托绑定到您下面显示的任何元素形式：

$('#parent-form-id').on('keydown', 'input', function(e){
   if (e.which === 13) {
      var index = $('input').index(this) + 1;
      $('input').eq(index).focus().val("");
      return false;
   }
});

Answer 2

$('input')仅影响此函数运行时存在的元素您还需要在插入的元素上运行相同的脚本：

var inputs = $('<input type="text" name="inputBasic[]" value="" class="form-control" />');
inputs.appendTo($("#dc_step_inputs"));
inputs.keydown(function (e) {
    if (e.which === 13) {
        var index = $('input').index(this) + 1;
        $('input').eq(index).focus().val("");
        return false;
    }
});

Answer 3

您可以命名您的按键功能

$('input').keydown(keydown);
function keydown(){
    if (e.which === 13) {
        var index = $('input').index(this) + 1;
        $('input').eq(index).focus().val("");
        return false;
    }

当您创建新输入时，请为其指定一个ID，如下所示：

var inputs = $('<input id="newInput" type="text" name="inputBasic[]" value="" class="form-control" />');
inputs.appendTo($("#dc_step_inputs"));

然后

$('#newInput').keyDown(keyDown);

Answer 4

正如已经提到的，当您在JavaScript中向DOM元素添加事件侦听器时，再次将其设置为元素本身，而不是选择器或给定的元素集合。

解决此问题的一种方法是将事件侦听器添加到您希望触发事件的所有元素的公共父。此过程称为Event Delegation。幸运的是，在jQuery中这很简单，使用以下语法：

$(<parent_selector>).on(<event>, <child_selector>, <fn>);

从您提供的示例中可能看起来像（假设您只想在#dc_step_inputs内定位输入）：

$("#dc_step_inputs").on("keydown", ":input", function(e) {
  if (e.which === 13) {
    var index = $('input').index(this) + 1;
    $('input').eq(index).focus().val("");
    e.preventDefault(); // Note, this is preferred to return False
  }
});

如何删除/禁用appendTo Elements上的提交？

4 个答案: