Question

So I have a .live() click event on a textarea which allows user to leave comments.
I also have this Jquery function to clear the default text of ‘Leave a comment…’ and unbind the event as so if the user clicks on the textarea again their comment is not erased.

Here is the function.

$('#comment-textarea').live('click', function(e) {
        $(this).text('');
        $(this).unbind(e);
});

However, when the user submits the commment, the default text is submitted even though it is cleared and they enter their own text. I thought it was the unbind event causing this, but I also wrote it like this.

$('#comment-textarea').live('click', function(e) {
        if($(this).text() == 'Leave a comment') {
            $(this).text('');
        }                            
});

But it still submits the initial text. Has anyone ran into this before?

***EDIT

So 100% for sure the jquery events are not binding to element that are not within screen view. If I scroll down in the div, anything below the bottom of the div and out of view do nothing at all.

Answer 1

Because you should work with val(), not text(). <textarea> is an HTML form control, and for form controls, you use val() function to get their current value, or val(x) function to set their current value.

$('#comment-textarea').live('click', function(e) {
        $(this).val('');
        $(this).unbind(e);
});