Question

我想在用户点击按钮到body时附加文本框。但我想在用户在该页面上时只附加一次。我尝试使用计数器来做到这一点。但是有一些小问题。

<script type="text/javascript">$(document).ready(function(){
  var k=0;
    $('#show').click(function(){

      if(k==null){
    for(i = 0; i < 5; i++) {
    $('body').append('<br/>guve your name<input type="text" id="div'+ i +'" />');
        };
  };
   k=1;   
});

});</script>

in html

<button id="show">Hii</button>

Answer 1

使用 one() 方法附加事件处理程序，它只对事件类型和元素执行一次处理程序。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#show').one('click', function() {
      for (i = 0; i < 5; i++) {
        $('body').append('<br/>guve your name<input type="text" id="div' + i + '" />');
      };
    });
  });
</script>

<button id="show">Hii</button>

Answer 2

您有多种选择：

检查元素是否存在（最简单）。

当您添加带ID的div时，可以直接检查它们，这样您就可以省去变量了。

$('#show').click(function() {
    if ($("#div0").length == 0) {
        for(i = 0; i < 5; i++) {
            $('body').append('<br/>give your name<input type="text" id="div'+ i +'" />');
        };
    }
});

使用one()（最不受欢迎的选项imo）

$('#show').one(function() {
    for(i = 0; i < 5; i++) {

单击按钮后删除（或禁用）按钮

（UX唯一明智的选择，如果需要，可以与one（）结合使用）

$('#show').click(function() {
    $('#show').hide();
    for(i = 0; i < 5; i++) { ...

限制JavaScript附加到dom

2 个答案: