jQuery focusin and focusout live events are not firing

Question

jQuery Version: 1.4.1

I am attempting to write a simple watermark type plugin and I want to take advantage of live events since not all of the eleme

Answer 1

Try:

$(document).ready(function(){
  $('input[type=search]').bind('focusin', function(){
    $(this).animate({width: '300px'}, 500);
    $('svg.magnifier').hide();
    $('svg.cancel').show();
  }).bind('focusout', function(){
    $('svg.cancel').hide();
    $('svg.magnifier').show();
    $(this).animate({width: '100px'}, 500);
  });
});

div.box_block {
  position: relative;
}
input[type=search] {
  width: 100px;
  padding: 10px 10px 10px 30px;
}
/* --
  SVG - https://www.iconfinder.com/iconsets/ionicons
----- */
svg {
  position: absolute!important;
  left: 10px;
  transform: translateY(55%);
  top: 0;
}
svg.cancel {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box_block">
  <input type="search" placeholder="Search">
  <svg class="cancel" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M437.5,386.6L306.9,256l130.6-130.6c14.1-14.1,14.1-36.8,0-50.9c-14.1-14.1-36.8-14.1-50.9,0L256,205.1L125.4,74.5  c-14.1-14.1-36.8-14.1-50.9,0c-14.1,14.1-14.1,36.8,0,50.9L205.1,256L74.5,386.6c-14.1,14.1-14.1,36.8,0,50.9  c14.1,14.1,36.8,14.1,50.9,0L256,306.9l130.6,130.6c14.1,14.1,36.8,14.1,50.9,0C451.5,423.4,451.5,400.6,437.5,386.6z"/></svg>
  <svg class="magnifier" height="18px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="18px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3  c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2  c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2  c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>
</div>

Answer 2

.live() needs a selector not a DOM element, in the place you're calling it, it's only on a DOM element, so instead of this:

$(this).each(function() {
        $(this).live('focusout', function() {

Try this (this is already a jQuery object):

this.live('focusout', function() {

It needs this because of how .live() works, when an event bubbles up to document it checks that selector...if there's no selector, there's no way for it to check. Also, if you have a DOM element and the event handler is for only it, .live() wouldn't make much sense anyway :)

Answer 3

Take a look here.

Simulating "focus" and "blur" in jQuery .live() method