jQuery点击事件，然后创建多组div

我有jQuery点击事件，这是创建组div或容器的每次点击按钮。我想要的只是在每次点击按钮时创建一个容器。

这是每次点击按钮时创建的HTML容器。

<button type="button" id="add_container">Add Container</button
<div class="container">
<div class="label">
<span>I'm the Label</span>
</div>
<div class="margin-select">
<div class="padding-select">
<select class="select2>
<option>Choose 1</option>
<option>Choose 2</option>
</select>
</div>
</div>
</div>

jQuery:

$('#add_container').on('click', function(){
//add a container every click event <div class="container">...</div>
})

首先创建一个虚拟的div，如下所示-

HTML——

<button type="button" id="add_container">Add Container</button
<div class="repeat_container"></div>

JQuery -

$('#add_container').on('click', function(){
var html = '<div class="container"><div class="label"><span>I'm the Label</span></div><div class="margin-select"><div class="padding-select"><select class="select2><option>Choose 1</option><option>Choose 2</option></select></div></div></div>'; 
$('.repeat_container').append(html);
});

希望有帮助!!

使用clone()和.insertAfter。

的例子:

$('#add_container').on('click', function() {
$(".container:first").clone().insertAfter("div.container:last")
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="add_container">Add Container</button
<div class="wrapper">
<div class="container">
<div class="label">
<span>I'm the Label</span>
</div>
<div class="margin-select">
<div class="padding-select">
<select class="select2">
<option>Choose 1</option>
<option>Choose 2</option>
</select>
</div>
</div>
</div>
</div>

您可以添加一个容器包装器并为其附加一个子包装器:

<button type="button" id="add_container">Add Container</button>
<div class="wrapper">
<div class="container">
<div class="label">
<span>I'm the Label</span>
</div>
<div class="margin-select">
<div class="padding-select">
<select class="select2">
<option>Choose 1</option>
<option>Choose 2</option>
</select>
</div>
</div>
</div>
</div>

jQuery:

$('#add_container').on('click', function(){
console.log('Clicked!', 'add_container');
$('.wrapper').append(
'<div class="container">'
+ '<div class="label">'
+ '<span>I'm the Label</span>'
+ '</div>'
+ '<div class="margin-select">'
+ '<div class="padding-select">'
+ '<select class="select2">'
+ '<option>Choose 1</option>'
+ '<option>Choose 2</option>'
+ '</select>'
+ '</div>'
+ '</div>'
+ '</div>');
})

相关内容

最新更新

热门标签：