单击搜索时如何防止默认jquery

Question

如何在点击任何地方时关闭，而不是在点击课堂表格时关闭？

    $("body").on("click",function(){
        $("#searchresult").css("display","none");
    });
    $(".form-cauta , #search , #cauta").on("click",function(){
        $("#searchresult").css("display","block");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-cauta" action="{{URL("search")}}">
    <input type="text" id="search" name="search" placeholder="Cauta" autocomplete="off"/>
    <button type="submit" id="cauta">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form> This is body
<div class='searchresult' id="searchresult">
    <ul class='listitemsresult' id='itemssearch'>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    </ul>
</div>

单击任何地方时如何关闭，而单击类form-cauta时不关闭？

Answer 1

您需要将事件作为表单点击事件的闭包功能的参数传递。

$(".form-cauta, #search, #cauta").on("click", function(event){
    event.stopPropagation(); // Passing the event and stoping propagation
    $("#searchresult").css("display", "block");
});

JsBin Example

Answer 2

检查此工作代码。

$().ready(function(){
        $("body").on("click",function(){
            $("#searchresult").css("display","none");
        });
        $(".form-cauta , #search , #cauta").on("click",function(){
            $("#searchresult").css("display","block");
        });

         $(".form-cauta").submit(function (e) {
            e.preventDefault();
        });
    });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
 </script>
<form class="form-cauta" action="{{URL("search")}}">
    <input type="text" id="search" name="search" placeholder="Cauta" autocomplete="off"/>
    <button type="submit" id="cauta">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form> This is body
<div class='searchresult' id="searchresult">
    <ul class='listitemsresult' id='itemssearch'>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    <li>dsasdasdasad</li>
    </ul>
</div>