toggle() не работает и добавляет больше поля

Question

div show после ввода click event.i'm добавлена ​​функция переключения, когда я нажму поле ввода div, покажет, но я застрял, когда я нажму больше поля ввода времени div, не будет переключения и более DIV будет добавлять

$(document).ready(function(){ 
 
    \t $("#date_id").on("click", function(){ 
 
    \t this.insertAdjacentHTML("afterEnd", "<div id='lbl_date'>test</div>"); 
 
    \t }); 
 
     $("#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 не работает, это возможно, пожалуйста, помогите мне Ожидать, когда я нажму поле ввода ДИВ переключит

Answer 1

Вам нравится следующий трюк, какой вы хотите.

$(document).ready(function(){ 
 
    \t $("#date_id").one("click", function(){ 
 
    \t this.insertAdjacentHTML("afterEnd", "<div id='div_date'>test</div>"); 
 
    \t }); 
 
    $("#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 должен быть уникальным.