jQuery onblur第二次不工作

Question

我已經建立了一個基於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-->

Answer 1

為什么將這么多事件綁定到＃search-result？

檢查以下代碼是否有幫助。

<script language="javascript" >
     $(document).ready(function () {
     $('#search-input').keyup(function(){
         var keyword=$(this).val();
         $('#search-result').fadeIn(400);
         //$('#search-result').html('ajax result data');
         $.get('../search/instant-search.php', {keyword: keyword}, function(data){
            $('#search-result').html(data);
             });
         }); 
        $('#search-input').bind('blur', function() {
          $('#search-result').fadeOut(400);
        });
        $('#search-input').bind('focus', function() {
          $('#search-result').fadeIn(400);
        });
    });
</script>

Answer 2

您可以嘗試以下方法：

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