Add table rows with append() and edit it by using jEditable

Question

so i have table that content is loaded with json

$(document).ready(function () {
    $(".click").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit"
    });

    $.getJSON('../ajax/ajax_get_data.php', function(data) {
        $.each(data.split, function(i) {
            $('.wk_skile_table > tbody:last').append('<tr><td class="click">'+i+'</b></td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.split+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');

            //or add dynamically 
            $("td").each(function() {
                $(this).addClass("click");
            });
        });

        $.each(data.aux, function(i) {
            $('.wk_aux_table > tbody:last').append('<tr><td>'+i+'</td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');
        });
    });
});

But it won't work when i use append() :\

Do you have any ideas how to fix it?

Update Here is example http://jsfiddle.net/f33Fs/

the problem is that jeditable 'did not see' .click class. I changed the code to

$("th").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
    indicator : "<img src='img/indicator.gif'>",
    tooltip   : "Click to edit...",
    style  : "inherit"
});

and works fine for html (it is written in the HTML file). But for td which is added to table by append() function

    $("td").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit"
    });
 does not work...

Answer 1

I have finally figure it out

$(document).ready(function () {

    $.ajax({
        url: '../ajax/ajax_get_data.php',
        async: false,
        dataType: 'json',
        success: function(data) {
        $.each(data.split, function(i) {
            // 'this' is the value of the object item
            // key is the map/object key, value is value
            $('.wk_skile_table > tbody:last').append('<tr><td>'+i+'</b></td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.split+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');

        });

        $.each(data.aux, function(i) {
            // 'this' is the value of the object item
            // key is the map/object key, value is value
            $('.wk_aux_table > tbody:last').append('<tr><td>'+i+'</td><td>'+this.row1+'</td><td>'+this.row2+'</td><td>'+this.orange_start+'</td><td>'+this.red_start+'</td><td>'+this.blinking+'</td>');
        });
        }
    });

    $("td").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", {
        indicator : "<img src='img/indicator.gif'>",
        tooltip   : "Click to edit...",
        style  : "inherit"
    }); 
});

Probably getJSON was the problem because the script was asynchronously. With this script, everything works fine.

Answer 2

UPDATE :

I moved the jeditable init after the append, and it works now :)