Question

我需要在活动期间创建/删除输入。

问题是我只需要创建一次input标签。

如果我使用jQuery的.off()，则该事件发生一次，因此删除不再起作用。

$('#first').keyup(function() {
  if ($(this).val().length > 0) {
    console.log('add');
    $(this).after('<input id="two" type="text" name="lot">');
    //$(this).off();
  } else {
    console.log('delete');
    $('#two').remove();
  }
});

input {
  display: block;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="first" type="text" name="firstname">
  <input type="submit" value="Submit">
</form>

这是我的代码：https://codepen.io/Jennifer_C/pen/Ermqqd

谢谢您的帮助。

Answer 1

只需在id="two"-条件中添加下一个元素是否具有if的检查：

$('#first').keyup(function() {
  if ($(this).val().length > 0 && !this.nextElementSibling.id === "two") {
    console.log('add');
    $(this).after('<input id="two" type="text" name="lot">');
  } else {
    console.log('delete');
    $('#two').remove();
  }
});

input {
  display: block;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input id="first" type="text" name="firstname">
  <input type="submit" value="Submit">
</form>

Answer 2

您可以检查ID为two的元素是否存在，如果存在，那么您就知道不再需要添加该元素，如果不存在，则可以添加该元素。最后，如果没有更多字符（即$(this).val().length <= 0），则可以删除输入：

$('#first').keyup(function() {
  if ($(this).val().length && !$("#two").length) {
    $(this).after('<input id="two" type="text" name="lot">');
  } else if (!$(this).val().length) {
    $('#two').remove();
  }
});

input {
  display: block;
  margin: 5px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="first" type="text" name="firstname">
  <input type="submit" value="Submit">
</form>

请参阅工作示例here

jQuery：如何创建输入/删除（keyup事件）

2 个答案: