如何爲每個fieldset設置名稱添加dynamicaly

Question

我想爲每個fildset設置一個名稱添加dynamicaly，名稱取自一個select標籤。 例如，我從選擇列表中選擇了一個產品，將名稱作爲字段集的圖例捕獲。然後我按下添加按鈕添加另一個字段集，並且當我從選擇列表中選擇一個新名稱時，名稱保留所有字段集。

這裏是我的代碼

HTML：

$("select[name='brand']").change(function() { 
 
     
 
      var selectedText = $(this).find("option:selected").text(); 
 
      $(".test").text(selectedText); 
 

 
    }); 
 
$(function() 
 
    { 
 
     $(document).on('click', '.btn-add', function(e) 
 
     { 
 
      e.preventDefault(); 
 

 
      var controlForm = $('.controls:first'), 
 
       currentEntry = $(this).parents('.entry:first'), 
 
       newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
      newEntry.find('input').val(''); 
 
      controlForm.find('.entry:not(:last) .btn-add') 
 
       .removeClass('btn-add').addClass('btn-remove') 
 
       .removeClass('btn-success').addClass('btn-danger') 
 
       .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
     }).on('click', '.btn-remove', function(e) 
 
     { 
 
      $(this).parents('.entry:first').remove(); 
 

 
      e.preventDefault(); 
 
      return false; 
 
     }); 
 
    });

@import url('http://getbootstrap.com/3.3.7/assets/css/bootstrap.css') 
 
.container { 
 
    margin-top: 10px; 
 
} 
 

 
.nav-tabs > li { 
 
    position: relative; 
 
} 
 

 
.nav-tabs > li > a { 
 
    display: inline-block; 
 
} 
 

 
.nav-tabs > li > span { 
 
    display: none; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    right: 6px; 
 
    top: 8px; 
 
    color: red; 
 
} 
 

 
.nav-tabs > li:hover > span { 
 
    display: inline-block; 
 
} 
 

 
fieldset { 
 
    border: 1px solid #ddd !important; 
 
    margin: 0; 
 
    xmin-width: 0; 
 
    padding: 10px; 
 
    position: relative; 
 
    border-radius: 4px; 
 
    background-color: #f5f5f5; 
 
    padding-left: 10px!important; 
 
} 
 

 
legend { 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    margin-bottom: 0px; 
 
    width: 35%; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    padding: 5px 5px 5px 10px; 
 
    background-color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="controls"> 
 
\t <div class="entry"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <select id="brand" name="brand" class="selectpicker" data-width="100%" data-none-selected-text="Nothing selected" data-live-search="true" tabindex="-98"> 
 
\t \t \t \t <option value=""></option> 
 
\t \t \t \t <option value="1">Alcatel</option> 
 
\t \t \t \t <option value="2">Samsung</option> 
 
\t \t \t \t <option value="3">Nokia</option> 
 
\t \t \t \t <option value="4">Apple</option> 
 
\t \t \t \t <option value="5">LG</option> 
 
\t \t \t \t <option value="6">Sony</option> 
 
\t \t \t \t <option value="7">Huawei</option> 
 
\t \t \t \t <option value="8">Oppo</option> 
 
\t \t \t \t <option value="9">WIKO</option> 
 
\t \t \t \t <option value="10">ACCENT</option> 
 
\t \t \t </select> 
 
\t \t \t <span class="input-group-btn"> 
 
\t \t \t \t <button class="btn btn-success btn-add" type="button"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-plus"></span> 
 
\t \t \t </button> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <fieldset class=""> 
 
\t \t \t \t <legend class="test"></legend> 
 
\t \t \t \t <ul class="nav nav-tabs" role="tablist"> 
 
\t \t \t \t \t <li class="active"><a href="#contact_01" data-toggle="tab">Samsung A3</a><span>x</span> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="#contact_02" data-toggle="tab">Samsung A4</a> <span> x </span> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="#" class="add-contact">+ Add product</a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="tab-content"> 
 
\t \t \t \t \t <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div> 
 
\t \t \t \t \t <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div> 
 
\t \t \t \t </div> 
 
\t \t \t </fieldset> 
 
\t \t </div> 
 
\t </div> 
 
</div>

https://jsfiddle.net/aymanP/s5bud321/

Answer 1

當您添加動態元素。您的select事件處理程序不會工作，因爲它是「直接」綁定，它只會將處理程序附加到已存在的元素。它不會被綁定到未來創建的元素上。要做到這一點，您必須使用on()創建一個「委託」綁定。

由於您使用了.test類$(".test").text(selectedText);此聲明將文本更改爲所有.test類。所以需要在當前字段集中找到該類。使用parents()我們可以做到這一點。

$('.controls').on('change', "select[name='brand']", function() { 
 
    var selectedText = $(this).find("option:selected").text(); 
 
    $(this).parents('.entry').find(".test").text(selectedText); 
 

 
}); 
 

 
$(function() { 
 
    $(document).on('click', '.btn-add', function(e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls:first'), 
 
     currentEntry = $(this).parents('.entry:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.entry:not(:last) .btn-add') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .removeClass('btn-success').addClass('btn-danger') 
 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
    }).on('click', '.btn-remove', function(e) { 
 
    $(this).parents('.entry:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
});

@import url('http://getbootstrap.com/3.3.7/assets/css/bootstrap.css') .container { 
 
    margin-top: 10px; 
 
} 
 

 
.nav-tabs>li { 
 
    position: relative; 
 
} 
 

 
.nav-tabs>li>a { 
 
    display: inline-block; 
 
} 
 

 
.nav-tabs>li>span { 
 
    display: none; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    right: 6px; 
 
    top: 8px; 
 
    color: red; 
 
} 
 

 
.nav-tabs>li:hover>span { 
 
    display: inline-block; 
 
} 
 

 
fieldset { 
 
    border: 1px solid #ddd !important; 
 
    margin: 0; 
 
    xmin-width: 0; 
 
    padding: 10px; 
 
    position: relative; 
 
    border-radius: 4px; 
 
    background-color: #f5f5f5; 
 
    padding-left: 10px!important; 
 
} 
 

 
legend { 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    margin-bottom: 0px; 
 
    width: 35%; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    padding: 5px 5px 5px 10px; 
 
    background-color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="controls"> 
 
    <div class="entry"> 
 
    <div class="form-group"> 
 
     <select id="brand" name="brand" class="selectpicker" data-width="100%" data-none-selected-text="Nothing selected" data-live-search="true" tabindex="-98"> 
 
\t \t \t \t <option value=""></option> 
 
\t \t \t \t <option value="1">Alcatel</option> 
 
\t \t \t \t <option value="2">Samsung</option> 
 
\t \t \t \t <option value="3">Nokia</option> 
 
\t \t \t \t <option value="4">Apple</option> 
 
\t \t \t \t <option value="5">LG</option> 
 
\t \t \t \t <option value="6">Sony</option> 
 
\t \t \t \t <option value="7">Huawei</option> 
 
\t \t \t \t <option value="8">Oppo</option> 
 
\t \t \t \t <option value="9">WIKO</option> 
 
\t \t \t \t <option value="10">ACCENT</option> 
 
\t \t \t </select> 
 
     <span class="input-group-btn"> 
 
\t \t \t \t <button class="btn btn-success btn-add" type="button"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 
     </span> 
 
    </div> 
 
    <div class="form-group"> 
 
     <fieldset class=""> 
 
     <legend class="test"></legend> 
 
     <ul class="nav nav-tabs" role="tablist"> 
 
      <li class="active"><a href="#contact_01" data-toggle="tab">Samsung A3</a><span>x</span> 
 
      </li> 
 
      <li><a href="#contact_02" data-toggle="tab">Samsung A4</a> <span> x </span> 
 
      </li> 
 
      <li><a href="#" class="add-contact">+ Add product</a> 
 
      </li> 
 
     </ul> 
 
     <div class="tab-content"> 
 
      <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div> 
 
      <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div> 
 
     </div> 
 
     </fieldset> 
 
    </div> 
 
    </div> 
 
</div>