jQuery Blur（）がclick（）関数と連携していません

Question

私は外でクリックするとコンテンツが消えるツールチップを作成しようとしていますが、異なる投稿への解決策を試してみました。

問題は私がツールチップをどのように起動しているかと思いますが、私が知っている唯一の方法です。ここに私のjsと私のHTMLマークアップのコードがあります。

ツールチップがうまくいきますが、私が試した方法ではblurイベントでは機能しません。

$(document).ready(function() { 

    function tooltover(target_item){ 
     $(target_item + '> a').click(function(){ 
      $('.tiptover_box').focus(); 

      var pos = $(this).position(); 
      var width = $(this).outerWidth(); 
      var boxw = $(this).next().outerWidth(); 
      var boxh = $(this).next().outerHeight(); 

      $(this).next().css('left', (pos.left - ((boxw/2)-(width/2)))); 
      $(this).next().css('top', (pos.top - (boxh+5))); 
      $(this).next().addClass('tiptover_show'); 
      $(this).next().delay(5).queue(function(){ 
       $(this).addClass('tt-in'); 
       $(this).dequeue(); 
      }); 
     }); 
     $('.tiptover_box').blur(function(){ 
      $('.tiptover_box').removeClass('tiptover_show tt-in'); 
     }); 
    } tooltover('.tiptover'); 

}); 

そしてHTML

<div class="tiptover"> 
    <a>Link Test</a> 
    <div class="tiptover_box" style="background-image: url(content/prod_0002.jpg);"> 
     <div>Description.</div> 
    </div> 
</div> 

Answer 1

異なるアプローチは、div自体に集中するのではなく、DOMの残りの部分に焦点を合わせることです。 this solutionで

彼はdocument自体にmouseupイベントを使用し同様の質問にprc322によって与えられた：今、あなたのツールチップは、「閉じられます

$(document).mouseup(function (e) 
{ 
    var container = $(".tiptover_box"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     container.removeClass('tiptover_show tt-in'); 
    } 
}); 

^{（関連性のために私が編集）}

.tiptover_boxまたはその子孫でない要素にmouseupイベントが発生したときに発生します。

Answer 2

の代わりに（入力フィールドをぼかすほど信頼性が高くありません）のdivのblurイベントをトリガしようとしている、あなたはあなたがしたいと何ができます、からの回答と基本的に同じコンテナとその子のための追加のテスト：

$('body').click(function(e){ 
     var tooltipContainer = $('.tiptover_box'); 
     var clickTarget = e.target; 

     if(!tooltipContainer.is(clickTarget) 
      && tooltipContainer.has(clickTarget).length === 0){ 
      tooltipContainer.removeClass('tiptover_show tt-in'); 
     } 
}); 

編集： - 何がクリックされたとき、あなたはツールチップを隠します ボブ。