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 >...</div>
})

uj5u.com熱心網友回復：

首先創建一個虛擬 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);
});

希望能幫助到你！！

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

您可以添加一個容器包裝器并向其附加一個子級：

HTML：

<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 >'
          '<div >'
              '<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>');
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/493229.html

標籤：javascript html jQuery

上一篇：當這還不是表格資料集時，如何使用GAS組合和轉置該資料集？

下一篇：如何通過單擊外部元素來關閉元素？