Geek asks and answers

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

This is probably an easy solution, but I'm having trouble moving my brain around it ...

I use the jQuery editing plugin for some divs that will be generated on the fly. It should be simple: click in the newly created div and you can edit the content. I have problems with live ().

Without using live (), it obviously works fine for a static div. Click once, get editable content.

When using the live () function, I need to double-click to edit the content. Then, at any subsequent time, when he clicked, it only takes once. This seems like a focus issue. Perhaps changing the plugin itself will help?

That's what I'm talking about ... http://jsfiddle.net/efflux/62CzU/

This has something to do with the way I call the editinplace () function with live:

$('.editable').live('click',function() {
    //event.preventDefault();
    $('.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"
    });  
 });

How to make the edit-in-place plugin function normally on my divs created via js?

Any help would be appreciated!

+1
source share
3 answers

Quick and dirty fix: http://jsfiddle.net/62CzU/5/

var $this = $(this),
      isInit = $this.data('edit-in-place');
if(!isInit){
    $('.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.click();
}
+2
source

This does not work because it is not configured until you click on it. As soon as you click on it, you will configure EditInPlace, which requires its own click. Just run the following click after setting it up: http://jsfiddle.net/62CzU/6/

+2
source

Live Demo

.

$("button.btn").click(function() {
    $(".mydiv").prepend('<div class="passage-marker"><div class="annotation editable">it take 2 clicks to edit me, unless I have already been edited</div></div>');

         $('.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"
        });  

    });
}

Basically, you just redo it every time you create it. The reason you had a problem with liveis because the first click connected it, so the second click it was already connected and will work.

+1
source

More articles: