How to make something load at an event rather than on page-load

So the situation is for comments on a blog in progress, each commenter will have the ability to reply to any comment. To do this, I have a link that, when clicked, will reveal (with 开发者_如何学运维jQuery) a special reply form right there as opposed to the normal one at the bottom of the page. So instead of loading a form on every single comment when the page loads, I'd like to load only the forms that are needed by the user and only when they click on the link.

Now, I don't simply want to hide them, I know how to do that. I want them to not be there at all until that link is clicked. So can this be done? You don't need to tell me exactly how to do it (all though I may be back here later for something specific) If you just give me a search term, or a brief overview that would be awesome! Thanks!!

---

On link click create the form dynamically. e.g:

$('a.link').click(function()
{
   $('body').append("div id='dynamicdiv' class='y'><input type='text class='xyz' />" +
                    ".........................");
   $('#dynamicdiv').css({'position': 'absolute', 'top': '100px', 'left': '200px'});
});

---

The easiest way to inject HTML is using jQuery's load function.

From the example - loads a page, and add a selection from the page:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

For more advanced options, should you need them, you can also use ajax :

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

---

I would add the form once, hide it, clone and append it when needed. The link would contain an id (or other identifier) which references the comment. Use javascript to manipulate the action attr of the form or the url option (if using the jQuery.form plugin).