代码之家 › 专栏 › 技术社区 › noclist

使用jquery追加多次

html jquery

noclist · 技术社区 · 6 年前

如何附加变量 form 到 container 点击按钮不止一次?我在click事件中有3个append语句,它只追加一次。我希望3 形式 每次点击附加。

$(document).on('click', 'button', function() {
  var form = $('.form').first().clone();
  $('.container').append(form);
  $('.container').append(form);
  $('.container').append(form);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button>
      Click
      </button>
  <div class="form">
    Hello, World
  </div>
</div>

3 回复 | 直到 6 年前

Marcos Pérez Gude 6 年前

使用 outerHTML 随时附加内容。这个 clone() 函数只创建一个副本。

https://jsfiddle.net/843yhrqs/

$(document).on('click', 'button', function() {
  var form = $('.form')[0].outerHTML;
  $('.container').append(form);
  $('.container').append(form);
  $('.container').append(form);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button>
      Click
      </button>
  <div class="form">
    Hello, World
  </div>
</div>

ADyson 6 年前

你需要 clone() 表单每次,否则jquery似乎检测到您之前已经附加了相同的对象。

$(document).on('click', 'button', function() {
  var form = $('.form').first().clone();
  $('.container').append(form);
  $('.container').append(form.clone());
  $('.container').append(form.clone());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button>
      Click
      </button>
  <div class="form">
    Hello, World
  </div>
</div>

Quentin 6 年前

元素不能同时出现在多个位置。

你只克隆过一次。

而是每次都克隆它。

$(document).on('click', 'button', function() {
  var form = $('.form').first();
  $('.container').append(form.clone());
  $('.container').append(form.clone());
  $('.container').append(form.clone());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button>
      Click
      </button>
  <div class="form">
    Hello, World
  </div>
</div>