How to disable jQuery blur event on certain selector

Question

I have the following jQuery and HTML which hide the search result when the focus on the input has been lost.

This code hides my div with id #searchResult when the elements on #searchResult are clicked. I want to disable blur when elements on #searchResult div are clicked. Basically, I want to hide <div id="searchResult"> when the focus is lost and show when it's on focus. How can I achieve that?

$(document).on("blur", "#txtSearchTerm", function () {
    $('#searchResult').hide();
});

$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

<div id="searchResult"> will be hidden on every click of elements inside it.

Maybe check the [Jquery not selector](http://api.jquery.com/not/) — kevinSpaceyIsKeyserSöze, Oct 13 '17 at 11:50
I am confused how to use not on blur event. how can disable blur when clicked on `
`'s child — Albert Einstein, Oct 13 '17 at 11:53
Possible duplicate of [jQuery: fire click() before blur() event](https://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event) — Guillaume Georges, Oct 13 '17 at 12:02

score 6 · Answer 1 · edited Oct 13 '17 at 17:21

6

You can simply turn off your blur event with the following code.

$(document).off("blur", "#txtSearchTerm");

edited Oct 13 '17 at 17:21

Peter Mortensen

30,738
21
105
131

answered Oct 13 '17 at 11:47

Muhammad Jahanzeb

186
7

I don't want to off blur, I want to off blur on `
`'s child click only
– Albert Einstein Oct 13 '17 at 11:54
elements on `
` are link, so e.preventDefault(); will not work.
– Albert Einstein Oct 13 '17 at 12:01

SilverSurfer · Accepted Answer · 2018-04-11T08:27:47.647

4

You dont need blur event to achieve that:

$(document).click(function(e) {
    if ($(e.target).is("div") && $(e.target).has("ul > li")){
        $('#searchResult').show()
    }
    else $('#searchResult').hide()
    
    if ($(e.target).is(':focus')){
        $('#searchResult').show()
    }
})

#searchResult{
    margin-top: 50px;
    border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">
Click out the input to hide div
<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">click here</div>
           </a>
        </li>
    </ul>
</div>

edited Apr 11 '18 at 08:27

answered Oct 13 '17 at 12:00

SilverSurfer

4,281
6
24
50

once the link is clicked `
` didn't hide.
– Albert Einstein Oct 13 '17 at 12:11
even in mouse down – Albert Einstein Oct 13 '17 at 12:12
@KiranShahi Updated answer. Do you want to hide #searchResult when clicked out that element? – SilverSurfer Oct 13 '17 at 12:16
yes @SilverSurfer I want to hide again when the elements on `
` is clicked.
– Albert Einstein Oct 13 '17 at 12:22
Everything is going under dom, ajax request, hide/show etc. – Albert Einstein Oct 13 '17 at 12:23
@KiranShahi Hey bro check my updated answer, I finally made as you need – SilverSurfer Oct 13 '17 at 15:33
Thank you bro, I will implement it on Monday. Its weekend here :D – Albert Einstein Oct 13 '17 at 15:35
No problem I will, – Albert Einstein Oct 13 '17 at 15:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156681/discussion-between-kiran-shahi-and-silversurfer). – Albert Einstein Oct 13 '17 at 15:47

score 4 · Answer 3 · edited Oct 13 '17 at 17:24

You can't do that, because the blur is fired before the click on the child. So you would need to add an event handler on the document which closes the results. You cancel that event when someone clicks the results. Something like this:

$('#txtSearchTerm').click(function(e) {
  $('#searchResult').show();
  e.stopPropagation();
});

$(document).click(function(e) {
    $('#searchResult').hide();
});

$('#searchResult').click(function(e) {
  e.stopPropagation();
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

score 2 · Answer 4 · edited Oct 13 '17 at 17:22

My advise it to check relatedTarget and kill blur only if user clicks on certain elements.

$(document).on("blur", "#txtSearchTerm", function (e) {
  if ($(e.relatedTarget).hasClass("no-blur")){
  }else{
  $('#searchResult').hide();    
  }

});
$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">click here</div>
           </a>
        </li>
    </ul>
</div>

How to disable jQuery blur event on certain selector

4 Answers4