Добавить текст в элемент div при нажатии с помощью jquery

Question

Используя приведенный ниже код, я добавляю некоторые input элементов в div #cls. Но когда я пытаюсь ввести внутри ввода, также добавляется новый ввод. Мне нужен только новый ввод, когда я нажимаю «щелкнуть» текст. Может кто-нибудь мне помочь. Спасибо

$('#cls').click(function() { 
    var add="<input type="text">" 
    $(#cls).append(add); 
}); 

<div id="cls">click</div> 

Answer 1

Вы должны увидеть, действительно ли щелчок произошло в div

$('#cls').click(function(e) { 
 
    if ($(e.target).is(this)) { //or !$(e.target).is('input') 
 
    var add = '<input type="text">'; 
 
    $(this).append(add); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cls">click</div>

Answer 2

Append свой вклад в родительский элемент:

var clicked= false; 
 
$('#cls').click(function() { 
 
    if(!clicked){ 
 
    var add="<input type='text'>"; 
 
    $(this).parent().append(add); 
 
    clicked = true; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='cls'>click</div>

Answer 3

Если пользователь .after() метод вместо .append() текстовое поле будет появляться за пределами #CLS DIV и, следовательно, нажав на текстовое поле не вызывает добавление нового.

Некоторый код

$('#cls').click(function() { 
    var add="<input type='text'>"; 
    $('#cls').after(add); 
}); 

Try it out

Answer 4

использовать один метод JQuery в. он будет регистрировать обработчик кликов только один раз.

$('#cls').one("click", function(e) { 
    var add = '<input type="text">'; 
    $(this).append(add); 
});