2

私はjQueryPHPベースのインスタント検索を構築し、onblurイベントとともにフェード効果を使用しました。本文のどこかをクリックして初めて結果が消える場合を除いて、すべてが正常に機能していますが、入力フィールドにカーソルを合わせて結果を表示してから本文の結果をクリックしても消えることはありません。つまり、onblurは2回目には機能しません。

理解を深めるために私のコードを参照し、これを行うための可能な方法を提案してください。

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

2 に答える 2

3

なぜこれほど多くのイベントを＃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>
于 2012-08-07T05:22:42.850 に答える
1

あなたはこれを試すことができます：

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

デモ

コメントによると

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

デモ

于 2012-08-07T05:51:28.350 に答える