jQuery blur()没有听$(this)

Question

其次是HTML DOM:

<div class="opt">
    Options
    <div class="panel">
        <h3>i am in panel!!</h3>
    </div>
</div>

当我点击.opt它会显示.panel内容,但然后我需要触发另一个事件来隐藏.panel单击.opt元素外部时.

jQuery的:

$('.opt').click(function(){
    var $this = $(this);
    $this.find('.panel').fadeIn();
    $this.blur(function(){
        $this.find('.panel').fadeOut();
        alert('i am from blur');
    });
});

这是一个演示JsFiddle

但是这个blur()方法没有执行,我在技术上做错了什么？

Answer 1

您可以在正文上尝试点击事件而不是模糊.看看 https://jsfiddle.net/y0wsfpvb/7/

$('.opt').click(function(){
    var $this = $(this);
    $this.find('.panel').fadeIn();
});


$('body').click(function (e){ 
    if( $(e.target).closest(".opt").length > 0 == false) {
        $('.panel').fadeOut();
        alert('fake blur');
    }
});