jQuery html() function on future element

Question

I have a form. When the user selects something specific in a dropdown that loads an external document which includes some additional fields like so

$( "#morefields" ).load( "partials/formadditionals.jsp", function() {
    ...
});

This "formadditionals.jsp" contains a title <h1 id="form2title"></h1>. Now after that has loaded I want to write something into that <h1> via

$('#form2title').html("Test");

...which does not work, I am assuming because the element did not exists before!?

How can I use the html() function on "future" elements after they are loaded into the DOM?

Answer 1

Call it in the callback function.

$( "#morefields" ).load( "partials/formadditionals.jsp", function() {
    $('#form2title').html("Test");
});

Shameless plug: http://curtistimson.co.uk/jquery/using-jquery-callback-functions/