jQuery - Editing a newly created div with jEditable not working

Question

I'm trying to create a frontend editor and I'm getting the data into a new div using an AJAX call, like this:

function renderForm(type, position) {
    $.ajax({
        type: 'POST',
        url: 'renderForm.php',
        data: "type="+type+"&position="+position,
        success: function(data){
            var editbutoff = $(editbut).offset();
            $(document.createElement('div')).attr('id', 'editor')
                .height(($(divpar).height()+20))
                .width(($(divpar).width()+20))
                .css({position: 'absolute', left: editbutoff.left-($(divpar).width()+20), top: editbutoff.top-20, margin: "5px"})
                .append(data)
                .fadeIn("slow")
                .prependTo(pptest);
        }
    });
}

Everything works great 'till here. The new div shows with the data in place and everything looks like it should, but then, a problem arises!

I'm trying to use the jEditable plugin to edit the newly created data, but as the newly created div wasn't there when the document loaded, I made a .live event, like this:

$("#editor").live('mouseenter', function(){
    $('.edt').editable(function(){
        console.log($(this).val());
    });
    $('.edtta').editable(function(){
        console.log($(this).val());
    }, {
        type: 'textarea'
    });
});

Now, the problem is the following:

When I click on the .edt element the plugin fires up, creates a new input and displays the original text in it, but as the .edt element is new, when I try to post the jEditable data it shows up as <h1 class="edt"> in the console. <h1 class="edt"> is ofcourse the parent of the input field that jEditable created.

Can anyone point me in the right direction on how to get the data that I actually entered in the jEditable input field?

Many thanks!

Answer 1

If i not misunderstand your question, you are trying to get the inputed data prior submission? If so, use the onsubmit method:

      $('.edt').editable('@Url.Action('Edit', 'Home')', 
      {
        onsubmit: function (settings, data) {
            var input = $(data).find('input');
            var original = input.val();

            alert(original);
        }
      }

You need to use the .find() to get the input then only can get the value by .val() Hope this help :)