Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery focusin and focusout live events are not firing

Tags:

jquery

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);
like image 380
Corey Sunwold Avatar asked Aug 19 '10 17:08

Corey Sunwold


People also ask

What is the use of focusout event in jQuery?

This method is a shortcut for .on ( "focusout", handler ) when passed arguments, and .trigger ( "focusout" ) when no arguments are passed. The focusout event is sent to an element when it, or any element inside of it, loses focus.

What is the difference between focus event and focusin event?

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

What is focusin function in jQuery?

.focusin( handler )Returns: jQuery. Description: Bind an event handler to the "focusin" event. Type: Function( Event eventObject ) A function to execute each time the event is triggered. An object containing data that will be passed to the event handler.

What is the difference between Blur () and focusout () methods in jQuery?

The focusout () method attaches a function to run when a focusout event occurs on the element, or any elements inside it. Unlike the blur () method, the focusout () method also triggers if any child elements lose focus.


1 Answers

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

like image 183
Nick Craver Avatar answered Nov 15 '22 07:11

Nick Craver