基础下拉菜单停止工作答案

【问题标题】：Foundation dropdown stop working基础下拉菜单停止工作
【发布时间】：2016-05-15 00:52:26
【问题描述】：

我的页面上有一个 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'}); 
     }
});

【问题讨论】：

标签： javascript jquery zurb-foundation zurb-foundation-5

【解决方案1】：

不要为单个元素调用foundation，而是对foundation进行一般调用，将'reflow'作为参数传递：

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

例如：

$('#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');
     }
});

【讨论】：