jquery function not work inside append() function

Question

I have a table. Here it is: Fiddle: http://jsfiddle.net/PvWKG/ There are 2 columns in the table. Text of Left side's column(Name Me) are editable. There is a Button too at the top. When user click on the button, a row'll be added which I made with append() function. But at the dynamic row, editable function are not working. Normally editable function are working when I make my code like this:

<a href="#" class="edit_text">Name Me</a>

$(document).ready(function() {
    $('.edit_text').editable();
});

But, when I'm putting this code: <a href="#" class="edit_text">Name Me</a> inside append() function, it won't work. I don't understand why it's happened as I ain't good at jQuery. How can I fix this?

Answer 1

When you create new row you've already binded editable to existing rows not the new one. You've got to bind editable to the new row.

Example: http://jsfiddle.net/9zP8k/

var row = $('<tr><td><a href="#" class="edit_text">Name Me</a></td><td>&nbsp;</td>    </tr>');
$('.issue-table > tbody:last').append(row);
$('.edit_text').editable({
    type: 'text',
    title: 'Enter username'
});

Answer 2

After appending this text using append function, you need to call

$('.edit_text').editable();

function. Because without calling this function, there will be not applied jquery to newly appended tag.

Regards, Amit