Question

Ok,

i’m using jeditable + jmaskedinput to manipulate my table.

$(".edit_user").editable("save.php", { 

                    data: '{"84":"Test User","85":"Test User"," ":" "}',

                    type: "select",

                    onblur: "submit",



                });

Right after this i want to add a new column to my table.

$('table.schichtplan tr:first').append('<th><div class="add_user" id="xyz">User</div></th>');

I call this above via a button 😉

So i add a new TH-Element but i cant edit it via jeditable.

My Code:

        $(".edit_employee").editable("save.php", { 

                data: some json,

                type: "select",

                onblur: "submit",

                placeholder: "Mitarbeiter"

            });



        $('#add_employee').click(function(){

            var tage = $('table.schichtplan tr').length-4;

            var sort_id = $('table.schichtplan').find('tr')[0].cells.length-1;

            var new_th = '<th><div id="plan_id:'+plan_id+';sort_id:'+sort_id+'" class="edit_employee">Mitarbeiter</div></th>';

            $('table.schichtplan tr:first').append(new_th);

        });         

That’s the order i use. mh

Edit:

   $('th > div').live('mouseenter',function(){

                $(this).editable("save.php", { 

                    data: json,

                    type: "select",

                    onblur: "submit",

                    placeholder: "Mitarbeiter"

                });

            });

Even this doesn’t work ;(

Answer 1

That’s because .editable() is using .bind(), which only affects elements that already exist in the DOM. Try the following approach:

$('th > div').live('mouseenter', function() {
    $(this).editable(...);
});

Essentially, it observes the mouseenter event on any th > div. When it happens, it makes the div element editable.