Jeditable and .live() Suppress first Click

Question

I have jeditable fields that are updated by AJAX so am using .live() in conjunction with Jeditable to be able to persistantly bind the jeditable fields after AJAX update. However by using live() it suppresses the first 'click' and it is the second click that makes the field editable.

Interestingly (and perhaps key to the solution) is if I use 'this' as the reference the first click is suppressed for every individual jedtxt class field (ie. need to click twice to enter field A jedtxt and then twice again to enter edit for field B jedtxt), but if I use the class name '.jedtxt' the first click is only suppressed once (need 2 clicks to enter field A, but after that field B can be entered via a single click - appears to 'remember' the first click across the class.

Using $(this) Suppresses first click every time a jedtxt class element is clicked:

$('.jedtxt').live('click', function() {
$(this).editable('/post/somewhere',{ // note use of $(this)
'submit': 'OK',});});

Using $('.jedtxt') Suppresses first click first time only a jedtxt class is clicked:

$('.jedtxt').live('click', function() {
$('.jedtxt').editable('/post/somewhere',{ // note use of $('.jedtxt')
'submit': 'OK',});});

And the jedtxt elements are like:

<div id="ni-50" name="ni-50" class="jedtxt">somevalue to edit</div>

While the second case is slightly better I am still looking for the click to edit to work directly on the first click. Note I tried double-click or other event triggers and the problem is the same. This is a vanilla test page with no other events linked to the div element.

Thanks in advance for any assistance on this.

Answer 1

I suggest you read this topic:

Problem with jQuery edit-in-place with live() function.. need a ninja

The guy in the second solution solved it with

$(this).trigger('click');
    $('.editable').live('click',function() {

    $('.editable').editInPlace({
        callback: function(unused, enteredText) { return enteredText; },
        bg_over: "#cff",
        field_type: "textarea",
        textarea_rows: "5",
        textarea_cols: "3",
        saving_image: "./images/ajax-loader.gif"
    });  
    $(this).trigger('click');
 });