php - 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

为什么要将这么多事件绑定(bind)到#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>