如何点击按钮多次将我的变量form
附加到container
?我在click事件中有3个附加语句,它只附加一次。我希望每次点击可以追加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>
使用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>
你每次都需要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>
元素不能同时出现在多个位置。
你只克隆过一次。
每次克隆它。
$(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>