title: Jquery onblur not working second time
body: <p>I have build a jQuery PHP based instant search, I have used some fading effect along with onblur event, everything is working fine except when clicking anywhere in body for first time results disappear, but again if hover over to input field to bring result and then clicking in body results do not disappers,
  i.e onblur does not work second time. </p>
  
  <p>Please see my code for better understanding and suggest any possible way to do this.</p>
  
  <p>JQuery:</p>
  
  <pre><code>$(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();}); 
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input name="keyword" type="text" size="50" id="search-input" value = '';" /&gt;
  &lt;div id="search-result"&gt;&lt;/div&gt;&lt;!--end of search-result--&gt;
  </code></pre>