title: HTML Checkbox dynamically appended to list with JavaScript not working
body: <p>I havent been using jquery, javascript and HTML to to create a list a products and the task I am attempting to do now is to be able to select multiples from a list.</p>
  
  <p>So far what is working is I have a HTML  list and I can dynamically add through javascript the <code>&lt;li&gt;</code> required for each in the list.
  The problem is, the checkboxes are not checking at all. The even stranger thing is if I click on a checkbox multiple times very fast, it will check.
  Another feature I wish to add once the checkboxes are working is if a list item is clicked on, it automatically checks the checkbox related to that list. Would anyone mind helping me with these issues? Thank you and here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;!--Progress Bar Scripts--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div data-role="page" id="searchProducts" data-theme="b"&gt;
          &lt;div data-role="header" data-position="inline"&gt; &lt;a onclick="" data-icon="back"&gt;Back&lt;/a&gt;
  
               &lt;h1&gt;Search Products&lt;/h1&gt;
  
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="name"&gt;Product:&lt;/label&gt;
                  &lt;form action="javascript:searchProducts('denim')"&gt;
                      &lt;input type="search" name="searchboxProd" id="searchboxProd" value="denim" /&gt;
                      &lt;!--&lt;a href="#" data-role="button" style="width: 200px"&gt;Search&lt;/a&gt;--&gt;
                  &lt;/form&gt;
                  &lt;ul id="ProductsFound" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"&gt;
                      &lt;li data-role="list-divider"&gt;Products Found&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="prodList"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript</p>
  
  <pre><code>function searchProducts(prod) {
  for (var i = 1; i &lt; 6; i++) {
      $('#ProductsFound').append($('&lt;li/&gt;').append($('&lt;a/&gt;', {
          //'href': '#prod',
          //'onclick': 'selectProduct(' + i + ') ',
      }).append($('&lt;fieldset/&gt;', {
          'data-role': 'controlgroup'
      }).append($('&lt;input/&gt;', {
          'type': 'checkbox',
              'id': 'checkbox-2b',
              'data-theme': 'c',
              'onclick': 'checked=true'
      })).append($('&lt;label/&gt;', {
          'for': 'checkbox-2b'
  
      }).append($('&lt;label/&gt;', {
          'text': '    Denim ' + i
      }))))));
  }
  $('#ProductsFound').listview('refresh');
  
  }
  </code></pre>
  
  <p>some of the <code>&lt;li&gt;</code>'s produced (ProductsFound.innerHTML)</p>
  
  <pre><code>&lt;script&gt;\n                    
  &lt;/script&gt;\n                
  &lt;li&gt;
  &lt;a&gt;
  &lt;fieldset data-role=\"controlgroup\"&gt;
      &lt;input id=\"checkbox-2b1\" onclick=\"checked=true\" type=\"checkbox\" data-theme=\"c\"&gt;
  
      &lt;label for=\"checkbox-2b\"&gt;
          &lt;label&gt;    Denim 1&lt;/label&gt;
      &lt;/label&gt;
  &lt;/fieldset&gt;
  &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>