CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Danny Englander
Danny Englander

Reputation: 2044

Issue with jQuery :not selector

I have a search icon that when hovered over reveals an input text search box. I'm using jQuery to add a class to the input to reveal the text box when the search icon is hovered over. That is working fine.

The next function is that if the user decides not to click in the search box and elsewhere on the page, the search box goes away. That's working fine too.

The only remaining issue is that if the user clicks in the search box, it also goes away which I don't want.

My HTML:

<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">

<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">

My jQuery:

$(".search-hover").hover(function () {
    $('.text-hidden').addClass('hover');
  });

  // Now remove the class in case of a false start or the user decides to do something else.
  $("body:not(.text-hidden)").click(function(){
      //alert('The body click is working!!!');
    $('.form-text.text-hidden').removeClass('hover');
  });

Note that I'm attempting to use the :not selector to indicate to only remove the hover class if clicked anywhere but the search box but it's not working.

I've got a fiddle here

Upvotes: 0

Views: 60

Answers (2)

Itay
Itay

Reputation: 16785

The problem is that when you click the input, the body's click event still arises.

There's a simple solution. Just stop the event's propagation when the input's being clicked.

jsFiddle Demo

$(".form-text.text-hidden").click(function(e) {
    e.stopPropagation();
});

P.S - Notice that I've removed the :not selector from the JS. It has become unnecessary.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

Try

jQuery(function(){
    $(".search-hover").hover(function () {
        $('.text-hidden').addClass('hover');
    });

    // Now remove the class in case of a false start or the user decides to do something else.
    $("body").click(function(e){
        //alert('The body click is working!!!');
        if($(e.target).closest('.text-hidden').length == 0)
            $('.form-text.text-hidden').removeClass('hover');
    });
})

Demo: Fiddle

Upvotes: 1

Related Questions