Jquery onblur 第二次不起作用

Jquery onblur not working second time

本文关键字：不起作用 第二次 onblur Jquery      更新时间：2023-09-26

我构建了一个基于 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 结果？

检查下面的代码是否有帮助。

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

你可以试试这个：

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

演示

相关文章：