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

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>