我的页面上有一个 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>
我认为我需要重新绑定(bind)基础事件监听器,但它不起作用。也许我只是做错了。
$('#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'});
}
});
最佳答案
不要为单个元素调用 foundation
,而是对 foundation
进行常规调用,并将“reflow”作为参数传递:
$(文档).foundation('回流');
例如:
$('#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');
}
});
关于javascript - 基金会下拉菜单停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35217478/