6

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 elements I need to use it on will exist during the page load, or they may be added and removed from the DOM. However, for some reason the events never fire.

Here is the not working 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 does work:

; (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);
Corey Sunwold
  • 10,194
  • 6
  • 51
  • 55

3 Answers3

7

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

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • `$(this).each` should be replaced by `this.each` for the same reasons. – jAndy Aug 19 '10 at 17:35
  • 1
    @jAndy - Actually he doesn't need the `.each()` at all, just chained selectors :) – Nick Craver Aug 19 '10 at 17:42
  • Something doesn't seem right here. I thought you should always use return this.each? See: http://stackoverflow.com/questions/2678185/why-return-this-eachfunction-in-jquery-plugins – Corey Sunwold Aug 19 '10 at 17:43
0

Take a look here.

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

Community
  • 1
  • 1
RobertPitt
  • 56,863
  • 21
  • 114
  • 161
  • This shouldn't be necessary since I am using version 1.4.1. That question is a workaround since previous versions of jquery didn't supporting using focusin and focusout as live events. – Corey Sunwold Aug 19 '10 at 17:41
0

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>
KingRider
  • 2,140
  • 25
  • 23