JQuery размытия() не слушает $ (это)

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

Это работает, если вы определяете де TabIndex свойство для DIV ... Try:

HTML

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

JS

$('.opt').click(function(){ 

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

Answer 2

Вы можете связать замирание выведите действие для обработчика щелчка на кузове, а затем добавьте:

event.stopPropagation(); 

для вашего обработчика щелчка opt class для этого.

Here is an example on codepen

Answer 3

Вы можете попробовать событие щелчка на теле вместо размытия. Посмотрите на 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'); 
    } 
});