title: dynamically generated inputs with buttons don't get an onclick
body: <p>I would like to create a form which allows additional inputs to be added dynamically and each line of the input has a button which when clicked should expose additional inputs which are optional.</p>
  
  <p>Regrettably, I can't seem to create an onclick handler for the dynamically generated button that will do anything</p>
  
  <p>Thank you for any clues</p>
  
  <p><a href="http://jsfiddle.net/slashdottir/BTS4A/" rel="nofollow">Here is a fiddle which demonstrates the problem</a></p>
  
  <p>Here is the same code as in the fiddle:</p>
  
  <p><strong>css and javascript:...</strong></p>
  
  <pre><code>&lt;style&gt;
  #time_est_input {
      display: none
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  $(document).ready(function () {
      $("#button-time-est").click(function () {
          $("#time_est_input").toggle();
      });
  });
  var g_ = new Object();
  g_.counter = 1;
  
  function addAnotherItem() {
      var input = document.createElement("input");
      input.title = "item";
      input.type = "text";
      input.id = "item" + g_.counter.toString();
      input.value = "";
  
      var inputCat = document.createElement("input");
      inputCat.title = "category";
      inputCat.type = "text";
      inputCat.id = "category" + g_.counter.toString();
      inputCat.value = "";
  
      var tesid = "time_est_input" + g_.counter.toString();
  
      var timeEstSpan = document.createElement("span");
      timeEstSpan.id = tesid;
      timeEstSpan.style.cssText = "display:none;";
  
      var timeEstButton = document.createElement("input");
      timeEstButton.title = "Add Time Estimate";
      timeEstButton.type = "button";
      timeEstButton.value = "+";
      timeEstButton.id = "time_est_button" + g_.counter.toString();
      timeEstButton.setAttribute("myspan", tesid);
      timeEstButton.onClick= function() {
          var tesid = this.getAttribute('myspan');
          var myspan = $(tesid);
          myspan.toggle();
      }; 
  
      var inputTimeEst = document.createElement("input");
      inputTimeEst.title = "time estimate";
      inputTimeEst.type = "text";
      inputTimeEst.id = "time_est" + g_.counter.toString();
      inputTimeEst.value = "";
  
      timeEstSpan.appendChild(inputTimeEst);
      var br = document.createElement("br");
      $('#form_list_parent').append(input);
      $('#form_list_parent').append(inputCat);
      $('#form_list_parent').append(timeEstButton);
      $('#form_list_parent').append(timeEstSpan);
      $('#form_list_parent').append(br);
      $(input).focus();
  
      g_.counter += 1;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Html:...</strong></p>
  
  <pre><code>Desired behavior:&lt;br&gt;
  &lt;input type=text id="item" title="item" autofocus&gt;&lt;/input&gt;
  &lt;input type=text id="category" title="category"&gt;&lt;/input&gt;
  &lt;input title="add time estimate" type="button" id="button-time-est" value="+"&gt; 
  &lt;span id="time_est_input"&gt;
     &lt;input type='text' id='time_est' title="time estimate"/&gt;
  &lt;/span&gt;
  &lt;hr/&gt;
      Dynamically generated inputs with buttons don't behave as above:&lt;br&gt;
          &lt;p id="form_list_parent"&gt;&lt;/p&gt;
          &lt;input type="button" id="additembutton" value="add item"     onclick="addAnotherItem()" /&gt;
          &lt;br/&gt;
  </code></pre>