限制JavaScript追加到dom

limit JavaScript append to dom

本文关键字：dom 追加 JavaScript 限制      更新时间：2023-09-26

我想在用户点击按钮到正文时附加文本框。但我想追加他们只有一次，而用户是在该页。我试过用counter来做这件事。但是有一些小问题。

<script type="text/javascript">$(document).ready(function(){
  var k=0;
    $('#show').click(function(){
      if(k==null){
    for(i = 0; i < 5; i++) {
    $('body').append('<br/>guve your name<input type="text" id="div'+ i +'" />');
        };
  };
   k=1;   
});
});</script>
在html 

<button id="show">Hii</button>

使用 one() 方法附加事件处理程序，对于事件类型和元素只执行一次处理程序。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#show').one('click', function() {
      for (i = 0; i < 5; i++) {
        $('body').append('<br/>guve your name<input type="text" id="div' + i + '" />');
      };
    });
  });
</script>
<button id="show">Hii</button>

您有多种选择:

检查元素是否存在(最简单)。

当你添加带有id的div时，它们可以被直接检查，这样你就不用担心变量了。

$('#show').click(function() {
    if ($("#div0").length == 0) {
        for(i = 0; i < 5; i++) {
            $('body').append('<br/>give your name<input type="text" id="div'+ i +'" />');
        };
    }
});


使用one() (imo最不利的选择)

$('#show').one(function() {
    for(i = 0; i < 5; i++) {


点击按钮后删除(或禁用)按钮

(唯一合理的UX选项，如果需要，可以与one()结合使用)

$('#show').click(function() {
    $('#show').hide();
    for(i = 0; i < 5; i++) { ...
相关文章：