Using unbind, I receive a Javascript TypeError: Object function has no method 'split'

Question

I've written this code for a friend. The idea is he can add a "default" class to his textboxes, so that the default value will be grayed out, and then when he clicks it, it'll disappear, the text will return to its normal color, and then clicking a second time won't clear it:

$(document).ready(function() {

    var textbox_click_handler = function clear_textbox() {
        $(this).removeClass('default');
        $(this).attr('value', '');
        $(this).unbind(textbox_click_handler);
    };

    $(".default").mouseup(textbox_click_handler);

});

The clicking-to-clear works, but I get the following error:

Uncaught TypeError: Object function clear_textbox() { ... } has no method 'split'

what is causing this? How can I fix it? I would just add an anonymous function in the mouseup event, but I'm not sure how I would then unbind it -- I could just unbind everything, but I don't know if he'll want to add more functionality to it (probably not, but hey, he might want a little popup message to appear when certain textboxes are clicked, or something).

How can I fix it? What is the 'split' method for? I'm guessing it has to do with the unbind function, since the clearing works, but clicking a second time still clears it.

Answer 1

Make sure you are unbinding mouseup:

function clear_textbox() {
    $(this).removeClass('default');
    $(this).attr('value', '');
    $(this).unbind('mouseup');
}

$(function() {
    $('.default').mouseup(clear_textbox);
});

---

Also I would write this as a plugin form:

(function($) {
    $.fn.watermark = function(settings) {
        this.each(function() {
            $(this).css('color', 'gray');
            $(this).mouseup(function() {
                var $this = $(this);
                $this.attr('value', '');
                $this.unbind('mouseup');
            });
        });
        return this;
   };
})(jQuery);

so that your friend can simply:

$(function() {
    $('.someClassYourFriendUses').watermark();
});

Answer 2

The unbind needs an event handler while you are specifying a function to its argument thereby giving you the error.

Answer 3

Hey,

I am not sure if this is really different but try assigning the function to a variable:

var c = function clear_textbox() {
    $(this).removeClass('default');
    $(this).attr('value', '');
    $(this).unbind('mouseup');
}

and then:

$(".default").mouseup(function(){
   c();
});

Answer 4

if you don't want to completely unbind mouseup, check for the current state using hasClass(). No need to unbind anything.

$(document).ready(function() {

    $('.default').bind('mouseup', function(e) {
        var tb = $(this);
        if(tb.hasClass('default')) {
            tb.removeClass('default').val('');
        }
    });

});

Answer 5

You can do it like this:

var textbox_click_handler = function(e) {
    $(this).removeClass('default')
        .attr('value', '')
        .unbind(e.type, arguments.callee);
};
$(function() {
    $(".default").mouseup(textbox_click_handler);
});

Or use the .one function instead that automatically unbinds the event:

$(function() {
    $(".default").one('mouseup', function() {
        $(this).removeClass('default').attr('value', '');
    });
});