javascript - 无法用jquery手动触发keydown事件

Question

<form>
    <div id="part-inputs">
        <div class="part-input">
            <label>Part 1</label>
            <input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
            <input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
        </div>
    </div>
    <input type="submit" name=submit>
</form>

<script>
    var nextPartNo = 2;
    var template = '<div class="part-input">' +
        '<label>Part <%= partNo %></label>' +
        '<input type="number" class="start" name="s[<%= partNo -1 %>]" value="" placeholder="start time" tabindex="<%= (partNo-1)*2+1 %>">' +
        '<input type="number" class="finish" name="f[<%= partNo -1 %>]" value="" placeholder="finish time" tabindex="<%= (partNo-1)*2+2 %>">' +
        '</div>';
    var compiledTemplate = _.template(template);

    // check for tab keydown at finish field
    $("#part-inputs").on('keydown', '.finish', function(event) {

        var keyCode = event.keyCode || event.which;

        if (keyCode == 9) { // tab key
            var $partInputTargeted = $(event.target.parentElement); // div#part-input
            if (!$partInputTargeted.is(':last-child')) {
                return;
            }
            $("#part-inputs").append(compiledTemplate({
                partNo: nextPartNo
            }));
            nextPartNo++;
        }
    });

    // check for enter key at both fields
    $("#part-inputs").on('keydown', ['.start', '.finish'], function(event) {

        var keyCode = event.keyCode || event.which;

        if (keyCode == 13) { // enter key
            console.log("here"); // this verifies we reach the block where we trigger jquery event 
            event.preventDefault();
            var e = jQuery.Event("keydown");
            e.which = e.keyCode = 9; // Create tab key event
            $(event.target).trigger(e);
        }
    });
</script>

上面是我正在创建的动态表单的片段。有多个单元的开始字段和结束字段。每个单元都是一个 div#part-input。所有 div#part-input div 都是 div#part-inputs 的子级。

在最后一个 div#part-input 的 finish 字段 触发选项卡事件时，将附加一个新的 div#part-input。我正在使用 underscore.js 编译模板(这按预期工作)

现在我希望在任何字段(开始或结束)处输入键来触发同一 .这是代码没有做任何事情的地方。

Answer 1

首先，您的提交按钮似乎存在拼写错误，缺少 name 属性周围的引号。

试试这个，它应该适合您正在寻找的东西。如果在完成输入时按下回车键，则会触发。我拿出我们的模板添加到它自己的函数中，这样您就可以在多个地方调用它。

function addTemplate() {
  var $partInputTargeted = $(event.target.parentElement); // div#part-input
  if (!$partInputTargeted.is(':last-child')) {
    return;
  }
  console.log('add new template');
}

$("#part-inputs .start, #part-inputs .finish").keydown(function (event) {
  if (event.which === 13) {
    event.preventDefault();
    
    var index = $('input').index(this) + 1;
    $('input').eq(index).focus();
    
    if($(this).attr('class') === 'finish') {
      addTemplate();
    }
  }
});

// check for tab keydown at finish field
$("#part-inputs").on('keydown', '.finish', function(event) {
  var keyCode = event.keyCode || event.which;

  if (keyCode == 9) { // tab key
    addTemplate();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div id="part-inputs">
        <div class="part-input">
            <label>Part 1</label>
            <input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
            <input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
        </div>
    </div>
    <input type="submit" name="submit" />
</form>