How can I add a set of inputs to a form with .load()?

I have a form which looks a bit like this:

<form id="myform" action="" method="post">
  <div id="options"></div>
  Input:<br />
  <textarea id="input" name="inpu开发者_如何学Got"></textarea>
  <button type="button" onclick="toggleOptions()">Options</button>
  <button type="button" id="go">Go</button>
</form>

Depending on certain factors, this form is used for different things. When I set it up for its new task, I load new options into the options div:

$("#options").load(configFile + "#comp-options");

This will place something like this in the div:

<span id="comp-options">
  <h2>Options</h2><br />
  Option 1 <input type="checkbox" id="option1" name="option1"><br /><br />
  Option 2 <input type="checkbox" id="option2" name="option2">
</span>

When I then click Go, I try to serialize the form so I can send it to a PHP script via ajax. This is where the problem is - the options don't get included:

alert($("#myform").serialize());

returns

input=

How can I properly add the optional inputs?

What you've suggested your code does seems to work fine for me: http://jsfiddle.net/ryleyb/h4Ztq/

I've used the jsfiddle way of loading the AJAX but other than that, I'm not sure what would be wrong with your code. Perhaps you can look at my example and figure out what the differences are to your code?