Скрыть элемент при нажатии за его пределами

Question

Я просматривал все текущие ответы для других, которые задавали этот вопрос, и ничто не работает для меня после тестирования большого образца кода, поэтому я решил, что пришло время сломаться и спросить. Простите меня, если это повторяется вопрос, но поскольку я не имел успеха с другими вариантами этого, я думал, что все будет в порядке.

Я использую JQuery для создания DIV, содержащего элементы списка в моей базе данных. Я бы хотел, чтобы DIV исчез, когда я нажимаю на него. Это код, который я использовал.

<script type="text/javascript" src="https://ajax.googleapis.com /ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
     function searchq(){ 
      var searchTxt = $("input[name='search']").val(); 
      $.post("live_search.php", {searchVal: searchTxt},  function(output) { 
       $("#output").html(output);  
      }); 
     } 
     </script> 
     <script type="text/javascript"> 
     $("#auto").autocomplete({ 
    source: function(request, response) { 
     var results = $.ui.autocomplete.filter(myarray, request.term); 

     response(results.slice(0, 10)); 
    } 
}); 
     </script> 
     /////////// 
     MY ATTEMPT TO HIDE THE DIV 
     <script type="text/javascript"> 
     $(document).click(function(e) { 
     if(!$(e.target).closest('#output').length){ 
     $("#output").hide(); 
     } 
     }); 


    </script> 

DIV, который я использую для отображения данных, называется выходом, как показано в коде. Любые идеи о том, как я могу получить выход DIV, исчезают при нажатии за пределы выходного DIV?

С наилучшими пожеланиями Sour Джек

Answer 1

вы можете сделать следующее:

$(document).click(function(e) { 
    if(!$(e.target).closest('#output').length){ 
     $("#output").hide(); 
    } 
}); 

Fiddle

Answer 2

Binding событие нажмите на документ/тело является решением, но я предпочитаю использовать событие размытия, используя следующий фрагмент:

$.post("live_search.php", { 
    searchVal: searchTxt 
}, function (output) { 
    $("#output").attr('tabindex', -1) 
     .css('outline', 0) 
     .one('blur', function() { 
      $(this).hide(); 
     }) 
     .html(output) 
     .focus(); 
}); 

Answer 3

@ f01 и @A. Wolff

Спасибо, ребята, за ответы. Мое окончательное решение проблемы, похоже, работает со следующим кодом, который был предоставлен @ f01, и я просто немного поиграл с ним, чтобы добиться того, что мне нужно. A. Wolff, ваш ответ тоже был замечателен, но немного над моей головой, поскольку мои возможности Javascript не существуют, поэтому я действительно не знаю, как перейти к следующему шагу. В любом случае, кому-либо еще с этой проблемой, вот код, чтобы скрыть поиск jquery DIV при нажатии за пределами области поиска. Если вы хотите показать DIV, чтобы выполнить другой поиск, этот код также переключит его. Объяснение ниже кода.

<script type="text/javascript" src="https://ajax.googleapis.com /ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
     function searchq(){ 
      $("#output").show(); 
      var searchTxt = $("input[name='search']").val(); 
      $.post("live_search.php", {searchVal: searchTxt},  function(output) { 
       $("#output").html(output); 
       $(document).click(function(e) { 
       if(!$(e.target).closest('#output').length){ 
       $("#output").hide(); 
        } 
        });  
        }); 
       } 
     </script> 

Примечание - код, который скрывает DIV эта часть (предоставляется f01)

$(document).click(function(e) { 
if(!$(e.target).closest('#output').length){ 
$("#output").hide(); 
} 
}); 

Чтобы переключить DIV обратно в поле зрения, если вы хотите сделать еще один поиск, я просто добавить этот код в верхней части функции searchq.

$("#output").show(); 

Еще раз спасибо!

Sour Джек