Question

如何在单击按钮后多次将变量form附加到container？我在click事件中有3个append语句，它仅追加一次。我希望每次点击可以附加3 form s。

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

Answer 1

您每次都需要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>

Answer 2

使用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>

Answer 3

一个元素不能同时出现在多个地方。

您只克隆了一次。

每次都克隆它。

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

使用jQuery附加多个

3 个答案: