javascript - 在外部单击时隐藏元素

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 消失的任何想法？

亲切的问候 酸 jack

Answer 1

您可以执行以下操作:

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

Fiddle