php - jQuery onblur第二次不工作

我已经建立了一个基于jQuery PHP的即时搜索，我使用了一些淡入淡出效果以及onblur事件，除了在主体中单击任意位置以使第一次结果消失时，其他一切都运行良好，但是如果将鼠标悬停在输入字段上以带回结果，点击正文结果不会浪费时间，
即onblur第二次不起作用。

请参阅我的代码以获得更好的理解，并提出任何可行的方法。

jQuery的:

$(document).ready(function () {

    $('#search-input').keyup(function(){
        var keyword=$(this).val();
        $.get('../search/instant-search.php', {keyword: keyword}, function(data){
            $('#search-result').html(data);
        });
    });

    $('#search-input').keyup(function(){ $('#search-result').fadeIn(400);});
    $('#search-input').blur(function(){$('#search-result').fadeOut(400);});

    $('#search-input').click(function(){$('#search-result').fadeIn(400);});

    $('#search-input').mouseenter(function(){ $('#search-result').fadeIn(400);});
    $('#search-input').mouseleave(function(){ $('#search-result').fadeOut(400)});

    $('#search-result').mouseenter(function(){ $('#search-result').stop();});
    $('#search-result').mouseleave(function(){ $('#search-result').stop();});

});

HTML:

<input name="keyword" type="text" size="50" id="search-input" value = '';" />
<div id="search-result"></div><!--end of search-result-->

最佳答案

您可以尝试以下方法:

$('#search-input').on('blur', function() {
    $('#search-result').fadeOut(400);
});
$('#search-input').on('mouseleave', function() {

    // on mouse leave check that input
    // is focused or not
    // if not focused the fadeOut

    if( !$(this).is(':focus')) {
        $('#search-result').fadeOut(400);
    }
});
$('#search-input').on('focus mouseenter', function() {
    $('#search-result').fadeIn(400);
});

DEMO
根据评论

$('#search-input').on('focus mouseenter', function() {
    $('#search-result').fadeIn(400);
});
$(document).on('click', function(e) {
    if(e.target.id != 'search-input' && e.target.id != 'search-result') {
        $('#search-result').fadeOut(400);
    }
})

DEMO

关于php - jQuery onblur第二次不工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11839636/