Question

I’m working on a jQuery that gets a list of elements from a server, appends it to an element, and then loops in the newly appended elements to transform them (make them jEditable).

I’m having trouble with the loop. The appending works alright, so I have a list of elements like :

<div id="innerModal">
    <label id="exampleTitle">Title :</label>
    <label id="exampleField" class="ftext">Value</label>
</div>

Then I try to loop in:

function makeListEditable(element, type){
    //I checked here that the element sent is well '#innerModal'
    alert($(element).children().length);
    $(element).children().each(function() {

        if( $( this ).is( 'ftext' ) ){
            makeEditable( $( this ), type, '', '' );
        }
    });
}

The alert prints “0”.

Where does that issue come from? How can I fix it?

Edit : Here’s the call of makeListEditable :

getFormOnElement(//Gets the form and appends it
    "getorganisationeditable/"+curOId,
                        "#innerModal"
    );
    makeListEditable('#innerModal');

Thanks in advance!

Answer 1

Since ajax is asynchronous, it will not wait till elements are appended and execute makeEditable. Since ajax might not necessarily have completed, the element has no children. Move makeEditable to ajax call’s success callback