Binding .click and .blur event handlers

I’m running into a problem binding both a .blur and .click event handler to the same clickable element. The UX I’m going for is as follows:

a user clicks on the search icon and the search field appears; when a user clicks again on the search icon, they can collapse and hide the search field. If they click away, the search field should hide.

So far, I’m able to achieve most of what I want, except that I can’t get the .click binding to toggle the class after it’s been clicked. I’m thinking it’s possibly because after being toggled the $ selector doesn’t have any results to select? I’m relatively new to JavaScript so I’m a little unclear on exactly how JavaScript or jQuery would handle something like this.

Jsfiddle here: http://jsfiddle.net/TpXJe/1/

Edit: including code here so future Stack Overflow users can see it:

html:

<form class="hidden-xs search-container navbar-right search-form" method="get">
    <div class="input-group">
        <input id="search-box" type="search" class="search-box" name="s" class="search-field form-control" />
        <label class="hide">Search for something</label>
        <label for="search-box"><span id="searchDivider">|</span>

            <div class="icon-continer"> <span class="glyphicon glyphicon-search search-icon"></span>

            </div>
        </label>
       </div>
</form>

css:

.search-container {
  right: 0px;
}

#searchDivider {
  position: absolute;
  right: 0px;
  top:31px;
  z-index: 1;
  color: @brand-success;
  cursor: pointer;
  font-weight: 200;

}
// Style the search box



$tl: .3s; // transition length

.search-box {
  outline-width: 0;
  transition: width $tl, border-radius $tl, background $tl;
  position: absolute;
  right:-37px;
  top: 20px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: transparent;
  & + label .search-icon {
    color: black    }
  &:hover {
    color: white;
    background: transparent;
    box-shadow: 0 0 0 1px transparent;
    & + label .search-icon {
       color: white    }
  }
  &.focused {
    transition: width $tl cubic-bezier(.18,.57,.25,.94), border-radius $tl;
    border: none;
    outline: none;
    box-shadow: none;
    padding-left: 15px;
    cursor: text;
    width: 600px;
    border: 1px solid black;
    border-radius: auto;
    background: white;
    color: black;
    & + label .search-icon {
      color: black;    }
  }
  &:not(:focus) {
    text-indent:-5000px;    } // for more-graceful falling back (:not browsers likely support indent)
}

#search-submit {
  position: relative;
  left: -5000px;
}

.search-icon {
  position: absolute;
  right: -45px;
  top: 14px;
  z-index: 1000;
  color: black;
  cursor: pointer;
  width: 60px;
  height: 60px;
  padding: 23px;
}

js:

  $('.search-icon').click(
  function () {
      $('.search-box ').toggleClass(' .search-box focused');
  });
  $('.search-box').blur(
  function () {
      $('.search-box').removeClass('focused');
  });

Answer

As Ehsan said in the comments, it appears that clicking the icon while it has already been clicked once fires both click() and blur() events. I just added in a variable to represent the state of clicked/unclicked and it works for me! Also in the updated fiddle below is what I believe you intended to do that Jacob mentioned in the comments-the class name is ‘focused’ not ‘.search-box focused’.

Updated JSFiddle Link

Here is the JS Code:

var clicked = false;

$('.search-icon').click(

  function () {
      if (clicked) {
      $('.search-box ').removeClass('focused');
          clicked = false;
      } else {
          $('.search-box ').addClass('focused');
          clicked = true;
      }
  });


  $('.search-box').blur(

  function () {
      $('.search-box').removeClass('focused');

Advertisement

Answer