在.focusout（）之前触发表单提交

Question

我有一个搜索表单：

<form id="search" role="search" method="get" action="/">
    <input id="search-text" type="text" placeholder="Search" name="s">
    <input id="search-submit" type="submit" value="">
    <div id="search-toggle"></div>
</form>

单击#search-toggle div时会显示 - 当#search-text输入失去焦点时隐藏。

$( '#search-toggle' ).on( 'click', function() {
    $( '#search input, .social' ).add( this ).toggle();
    $( '#search-text' ).focus();
});

$( '#search-text' ).focusout( function() {
    $( '#search-submit, #search-toggle, .social' ).add( this ).toggle();
});

如果点击#search-submit按钮，如何在隐藏所有内容之前确保提交表单。

目前，表单提交从未触发过。

Answer 1

一种方法是在隐藏表单之前使用很少的超时，以便提交事件可以正确传播：

$('#search-text').focusout(function () {
    var self = this;
    timeout = setTimeout(function() {
        $('#search-submit, #search-toggle, .social').add(self).toggle();
    }, 200);
});

$('#search').on('submit', function() {
    clearTimeout(timeout);
});

演示：http://jsfiddle.net/0c4s4kc1/