JQuery focusin events and focus shows don't fire

Question

jQuery Version: 1.4.1

I am trying to write a simple plugin such as a watermark, and I want to use live events, since not all the elements that I need to use it will exist at page load time, or they can be added and removed from the DOM. However, for some reason, events never fire.

Here is the broken code:

; (function($) { $.fn.watermark = function(text) { return $(this).each(function() { $(this).live('focusout', function() { if (this.value == "") { this.value = text; } return false; }); $(this).live('focusin', function() { if (this.value == text) { this.value = ""; } return false; }); }); } })(jQuery); 

I can get this to work without using live events. This code works:

 ; (function($) { $.fn.watermark = function(text) { return $(this).each(function() { $(this).focusout(function() { if (this.value == "") { this.value = text; } return false; }); $(this).focusin(function() { if (this.value == text) { this.value = ""; } return false; }); }); } })(jQuery); 

Answer 1

.live() needs a selector, not a DOM element, in the place where you call it, it is only in the DOM element, so instead:

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

Try ( this already a jQuery object):

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

This is necessary because of how .live() works, when an event bubbles up to document , it checks that the selector ... if there is no selector there, there is no way to check. Also, if you have a DOM element and an event handler for it, .live() makes no sense :)

Answer 2

Take a look here.

Simulate the focus and blur in the jQuery.live () method

Answer 3

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>