title: How to append an element to a dynamically generated element
body: <p>I have several forms one clone after another depends on the user input. in each form I have button to add a row of input:</p>
  
  <pre><code>&lt;h4&gt;3.3.5 Input Parameters&lt;/h4&gt;
  &lt;table id="input_param" data-role="table" class="ui-responsive table-stroke"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th data-priority="1"&gt;Parameter&lt;/th&gt;
              &lt;th data-priority="2"&gt;Data Type&lt;/th&gt;
              &lt;th data-priority="3"&gt;Required&lt;/th&gt;
              &lt;th data-priority="4"&gt;Brief description&lt;/th&gt;
              &lt;th data-priority="5"&gt;Location in Request&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;     
  &lt;input type="button" id="add_input_param" value="+ Add Input Parameter" data-inline="true" /&gt;&lt;br /&gt;
  </code></pre>
  
  <p>so if it's the first form(static form) than this code will work:</p>
  
  <pre><code>$("#add_input_param").click(function() {
      var maincontent = loadParam('IP', '01', ipCount);
      ipCount++;
      $('#input_param').append(maincontent).trigger("create");
  });
  </code></pre>
  
  <p>because the one after the first one I understand I have to use .on() </p>
  
  <pre><code>$("#input_form").on("click", "#add_input_param", function() {
      var maincontent = loadParam('IP', '01', ipCount);
      ipCount++;
     //$('this').append(maincontent).trigger("create");
  
  });
  </code></pre>
  
  <p>the comment area is the part that I cannot get it work. I would like to append the maincontent to #input_param (it's a table), but because it's dynamically generated how can I modify that line of code so it will work with it?</p>
  
  <p>maincontent will be something like this:</p>
  
  <pre><code>function loadParam(IO, form_number, counter) {
      var id = IO + form_number + '-' + counter;
      var maincontent = '&lt;tr&gt;';
      maincontent += '&lt;th&gt;&lt;input type="text" name="param' + id + '" id="param' + id + '" value="" /&gt;&lt;/th&gt;';
      maincontent += '&lt;td&gt;&lt;input type="text" name="data_type' + id + '" id="data_type' + id + '" /&gt;&lt;/td&gt;';
      maincontent += '&lt;td&gt;';
      maincontent += '&lt;select id="required" name="req' + id + '" id="req' + id + '"class="form-alpha"&gt;';
      maincontent += '&lt;option value="Mandatory" &gt;Mandatory&lt;/option&gt;';
      maincontent += '&lt;option value="Optional" &gt;Optional&lt;/option&gt;';
      maincontent += '&lt;option value="Conditional" &gt;Conditional&lt;/option&gt;';
      maincontent += '&lt;/select&gt;';
      maincontent += '&lt;/td&gt;';
      maincontent += '&lt;td&gt;&lt;textarea name="des' + id + '" id="des' + id + '" &gt;&lt;/textarea&gt;&lt;/td&gt;';
      maincontent += '&lt;td&gt;';
      maincontent += '&lt;select name="location' + id + '" id="location' + id + '" class="form-alpha"&gt;';
      maincontent += '&lt;option value="Header" &gt;Header&lt;/option&gt;';
      maincontent += '&lt;option value="Body" &gt;Body&lt;/option&gt;';
      maincontent += '&lt;option value="Query_param" &gt;Query Parameter&lt;/option&gt;';
      maincontent += '&lt;option value="Resource_uri" &gt;Resource URI&lt;/option&gt;';
      maincontent += '&lt;/select&gt;';
      maincontent += '&lt;/td&gt;';
      maincontent += '&lt;/tr&gt;';
      return maincontent;
  }
  </code></pre>