javascript - 在 .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/