将关键事件监听器添加到最后生成的输入字段并在键入后停止它

Question

当我点击一个按钮时，会在我的 dom 中生成一个不特定数量的输入字段加上一个空输入字段的表单。

我想在最后生成的空输入字段中添加类似按键事件的内容。

当我开始在最后一个空白输入字段中键入内容时，应该追加另一个输入字段。这个新的附加输入字段应该获得按键事件监听器，而我所在的输入字段应该松开按键事件监听器。

我是这样做的（编辑： 添加为代码片段）：

$(document.body).on("input", ".service-input:last", function (e) {
    var lastInput = $(".elementCtr.input-ctr input").last(),
            inputID = (parseInt(lastInput.attr('name')) + 1);
    $("#providerServicesForm .inputs").append('<div class="elementCtr input-ctr"><input id="service_' + inputID + '" type="text" value="" name="' + inputID + '"></div>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form accept-charset="UTF-8" name="providerServicesForm" id="providerServicesForm" method="post">
  <div class="inputs">
    <div class="elementCtr input-ctr"><input type="text" name="1" value="test1" id="service_1" class="service-input"></div>
    <div class="elementCtr input-ctr"><input type="text" name="2" value="test2" id="service_2" class="service-input"></div>
    <div class="elementCtr input-ctr"><input type="text" name="3" value="test3" id="service_3" class="service-input"></div>
    <div class="elementCtr input-ctr"><input type="text" name="3" value="" id="service_3" class="service-input"></div
  </div>
</form>

到目前为止一切正常。但是我当然希望这只发生在第一次按键时。

按下一个键后，它应该停止添加文本字段。但是当我在新添加的（最后一个）文本字段中输入内容时，它应该再次添加一个文本字段。但是按下一个键等后只有 1 个文本字段...
输入后无法停止事件监听器
按键是否适用于移动设备？

Answer 1

如果您只希望它发生一次，为什么不创建一个计数器并将其设置为 0。发生后，您可以将计数器增加到 1。

var counter=0;

$(document.body).on("keypress", $(".elementCtr.input-ctr input").last(), function () {
    if(counter==0){

        //put your logic here

        counter++;
    }
})

Answer 2

这种处理程序的优点在于，如果您用新的最后一个元素更新 DOM，处理程序会立即切换到新元素 - 无需使用 .off 或 .one.

$(document.body).on("input", ".service-input:last", function () {
    var inputID = (parseInt($(this).attr('name')) + 1);
    $("#providerServicesForm .inputs").append('<div class="elementCtr input-ctr"><input id="service_' + inputID + '" class="service-input" type="text" value="" name="' + inputID + '"></div>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form accept-charset="UTF-8" name="providerServicesForm" id="providerServicesForm" method="post">
  <div class="inputs">
    <div class="elementCtr">
      <input id="service_0" type="text" class="service-input" value="" name="0">
    </div>
    <div class="elementCtr">
      <input id="service_1" type="text" class="service-input" value="" name="1">
    </div>
    <div class="elementCtr">
      <input id="service_2" type="text" class="service-input" value="" name="2">
    </div>
  </div>
</form>

一个可能的增强是检测空字符串并删除新添加的输入。

将关键事件监听器添加到最后生成的输入字段并在键入后停止它

Add key eventlistener to last generated input field and stop it after typing

append

keypress

stoppropagation