javascript - toggle() 不起作用并追加更多字段

Question

div 在输入单击事件后显示。我添加了切换功能，当我单击输入字段时，div 将显示，但是当我单击更多时间时，我卡住了，输入字段 div 将不会切换，更多的 div 将附加

    $(document).ready(function(){
    	$("#date_id").on("click", function(){
    	  this.insertAdjacentHTML("afterEnd", "<div id='lbl_date'>test</div>");
    	});
      $("#lbl_date").toggle();
    });

  #lbl_date{
    position: relative;
    background-color:#FFAA41;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <input type="text"  id="date_id" class="date"/>
    <label for="lbl_date">date</label>

在我使用 $('').off() 和 $().one() 这但再次切换 div 不工作可能请帮助我 预计当我点击输入字段时 div 会切换

Answer 1

你确实喜欢跟随你想要的技巧。

$(document).ready(function(){
    	$("#date_id").one("click", function(){
    	  this.insertAdjacentHTML("afterEnd", "<div id='div_date'>test</div>");
    	});
  $("#date_id").on("click", function(){
      $("#div_date").toggle();
    });
    });

#div_date{
    position: relative;
    background-color:#FFAA41;
  display:none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <input type="text"  id="date_id" class="date"/>
    <label for="lbl_date">date</label>

注意 id 必须是唯一的。