基礎下拉停止工作

Question

我在我的頁面上有一個Foundation 5下拉菜單，它工作正常。但是，當我在下拉區域中提交表單時，會將新元素添加到頁面的頂部，以便將所有元素向下移動。之後，我所有的下拉菜單都停止工作。 （如果我跳過元素與DOM的加入，一切都很好工作）

我的下拉列表：

<div id="file-tab"> 
    <i data-dropdown="shareForm16" aria-controls="shareForm16" aria-expanded="false" class="iconTrigger"></i> 
    <form data-dropdown-content class="share-form f-dropdown content" aria-hidden="true" tabindex="-1" action="" id="shareForm16"> 
    ...   
    </form> 
</div> 

我想我需要重新綁定的基礎事件監聽器，但它不工作。也許我只是做錯了。

$('#file-tab').on("submit", 'form.share-form',function(e){ 
    e.preventDefault(); 
    var groupName = $(form.target).find('input[type="text"]').val(); 
    var id = $(e.target).parent().children('input[type="hidden"]').val(); 
    if (groupName) { 
      $(e.target).trigger('click'); 
      window.currentFTT.share(id ,groupName); // adds the element to the DOM 
      // my attempt to rebind: 
      $('#'+e.target.id).foundation({bindings: 'events'}); 
      $('i[aria-controls="'+e.target.id+'"]').foundation({bindings: 'events'}); 
    } 
}); 

Answer 1

與其說foundation各個元素，使一般的呼叫foundation，通過 '迴流' 作爲參數：

$(document).foundation('reflow');

E.g：

$('#file-tab').on("submit", 'form.share-form',function(e){ 
    e.preventDefault(); 
    var groupName = $(form.target).find('input[type="text"]').val(); 
    var id = $(e.target).parent().children('input[type="hidden"]').val(); 
    if (groupName) { 
      $(e.target).trigger('click'); 
      window.currentFTT.share(id ,groupName); // adds the element to the DOM 
      // my attempt to rebind: 
      $(document).foundation('reflow'); 
    } 
});