Question

使用以下代码，我将一些input元素添加到#cls div中。但是当我尝试在输入内部输入时还要添加新的输入。单击“单击”文本时，我只需要新输入。谁能帮我。谢谢

$('#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

将您的输入附加到父元素：

＆＃13;

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

＆＃13;

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

＆＃13;

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);
});

使用jquery单击时将文本附加到div元素中

4 个答案: