JQuery focusin events and focus shows don't fire

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); 
+6
jquery
source share
3 answers

.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 :)

+6
source share

Take a look here.

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

0
source share

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> 
0
source share

All Articles