Can't jqeditable after appent an element for it.

Question

Hi!

I wrote a script, to make a new element to my SQL db and my website. If the post is good, i will get back the ID of the post, so i can make a DIV box like the other DIVs.

The problem is, I can inline edit the texts in all of the DIVs but NOT in the created one.

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var moveit = $("<img>").attr({src: "icons/arrow_switch.png", class: "handle", alt: "move"});
        var editarea = $("<div>Ide írjon szöveget</div>").attr({class: "edit_area", id: ajaxRequest.responseText});
        $("<li></li>").attr({id: "listItem_"+ajaxRequest.responseText}).append(moveit).append(editarea).appendTo('#test-list');
    }

Example: one of the original DIVs

<li id="listItem_84"><img alt="move" class="handle" src="icons/arrow_switch.png"><div id="84" class="edit_area">Ide írjon szöveget...</div></li>

the JS created DIV

<li id="listItem_88"><img src="icons/arrow_switch.png" class="handle" alt="move"><div class="edit_area" id="88">Ide írjon szöveget</div></li>

So i really don't know why i can't edit the new line?! Please give me a solution for this.

Thanks for your help <3

Answer 1

You only called editable on the elements that were there when the call was made, you can rig it up as part of your ajax function to the new elements though:

ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    var moveit = $("<img>").attr({src: "icons/arrow_switch.png", class: "handle", alt: "move"});
    var editarea = $("<div>Ide írjon szöveget</div>")
                      .attr({class: "edit_area", id: ajaxRequest.responseText})
                      .editable(...same options here...);
    $("<li></li>").attr({id: "listItem_"+ajaxRequest.responseText})
      .append(moveit).append(editarea).appendTo('#test-list');
  }
}

Just put the same options in for the .editable() call as you used when the page loaded.