CODEWITHSUNDEEP
jquery
truslivii.lev
truslivii.lev

Reputation: 701

blur() function doesn't work for textarea

I try to add textarea on the page dynamically (it works) and then I try to remove textarea on blur() event but it doesn't work

$(function () {
$('.edit').one('click', function () {
    var id = $(this).attr('id');
    var comment$ = $(this).parents('li').prev('li.comment-post');
    var text = comment$.text(); 
    comment$.html('<textarea name="comment-edit" class="comment-edit">' + text + '</textarea><br />');  
    $('.comment-edit').focus();
});

$('.comment-edit').blur(function(){
    alert('text');
    var text = $(this).val();
    alert(text);
    /*var comment$ = $(this).parents('li.comment-post');
    $(this).remove();
    comment$.text('text');*/
});
});

http://jsfiddle.net/Wx85E/35/

What's wrong?

Upvotes: 0

Views: 807

Answers (4)

Nejat Can &#220;nl&#252;
Nejat Can &#220;nl&#252;

Reputation: 23

You are trying to bind the blur event to the text-area before the text-area is created. Try this fork

$(function () {
   $('.edit').one('click', function () {
       var id = $(this).attr('id');
       var comment$ = $(this).parents('li').prev('li.comment-post');
       var text = comment$.text(); 
       comment$.html('<textarea name="comment-edit" class="comment-edit">' + text + '</textarea><br />');
       $('.comment-edit').blur(function(){
           alert('text');
           var text = $(this).val();
           alert(text);
           /*var comment$ = $(this).parents('li.comment-post');
           $(this).remove();
           comment$.text('text');*/
       });
       $('.comment-edit').focus();
   });
});

Upvotes: 0

gokul
gokul

Reputation: 393

$(function () {
    $('.edit').on('click', function () {
        var id = $(this).attr('id');
        var comment$ = $(this).parents('li').prev('li.comment-post');
        var text = comment$.text(); 
        if($('.comment-edit').length){
            $('.comment-edit').show();
        }
        else{
        comment$.html('<textarea name="comment-edit" class="comment-edit">' + text + '</textarea><br />');
        }
        $('.comment-edit').blur(function(){

           var text = $(this).val();
           comment$.text(text);
            /*var comment$ = $(this).parents('li.comment-post');*/
            $('.comment-edit').hide();/*
            comment$.text('text');*/
        });
        $('.comment-edit').focus();
    });
});

Fiddle reference

Upvotes: 2

Milind Anantwar
Milind Anantwar

Reputation: 82241

You should be using:

$('.comment-edit').live('blur',function(){
    alert('text');
    var text = $(this).val();
    alert(text);
    /*var comment$ = $(this).parents('li.comment-post');
    $(this).remove();
    comment$.text('text');*/
});

I have used live because you have added 1.8.3 jquery library in fiddle.

You need to use on if you are using libraries 1.9 and further:

$(document).on('blur', '.comment-edit',function(){
//code
}

Working Demo

Upvotes: 1

Richa
Richa

Reputation: 4270

Because, you are binding that textarea live:

$(document).on('blur', '.comment-edit',function(){
        alert('text');
        var text = $(this).val();
        alert(text);
    });

Upvotes: 0

Related Questions