title: Javascript - Dynamically added checkboxes not working as expected in Kendo Panelbar headers
body: <p><em>I have this <a href="http://jsfiddle.net/5nX8r/45/" rel="nofollow noreferrer">fiddle</a> which works when adding static checkboxes.</em>
  I'm creating the checkboxes for the accordion panels like so:</p>
  
  <pre><code>liID = "tab" + x;
  $("&lt;li id = '"+ liID +"' class='k-item k-last k-state-default' aria-expanded='false'&gt;&lt;input type='checkbox' id='c" + x + "' class='cbSelect' /&gt;&lt;label for='c" + x + "'&gt;&lt;span  id='cbSelect" + x + "'&gt;&lt;/span&gt;" + liID + "&lt;/label&gt;&lt;/li&gt;").appendTo("#panelbar");
  </code></pre>
  
  <p>The above x-value is the <code>for</code> loop <code>variable</code>.</p>
  
  <p>I have used the following styles on the checkboxes:</p>
  
  <pre><code>input[type="checkbox"]
  {
      display:none;
  }
  
  input[type="checkbox"] + label span
  {
      display:inline-block;
      width:14px;
      height:14px;
      margin:-1px 4px 0 0;
      vertical-align:middle;
      background:url('../images/checkBox.png') right top no-repeat;
      cursor:pointer;
      float:right;
      margin-top:10px;
      margin-right:10px;
  }
  
  input[type="checkbox"]:checked + label span 
  {
      background:url('../images/checkBox.png') -1px top no-repeat;
  }
  </code></pre>
  
  <p>The checkbox.png image above is the following:
  <img src="https://i.stack.imgur.com/CE1Wp.png" alt="enter image description here"></p>
  
  <p>Which displays the checkboxes, but does not allow the check event when clicked, as it first opens the tab before allowing this. </p>
  
  <p>I have tried using the following:</p>
  
  <pre><code>$("#panelbar").on("click", "input.cbSelect", function(evt) 
  {
      evt.stopPropagation();
  });
  </code></pre>
  
  <p>but I'm not sure whether I'm linking it properly as this is linked with the normal checkbox which I have hidden using <code>display:none;</code></p>
  
  <p>When the normal checkbox is displayed with the newly styled checkbox, and when clicking on the original checkbox, it works as expected. <em>Instead of clicking on the original checkbox, I want to be able to click on the newly created checkbox and use the stopPropagation on it</em>.</p>
  
  <p>That is the first issue, the next is that I'm creating a checkbox for a grid like so:</p>
  
  <pre><code>var chkBox =  "&lt;input type='checkbox' id='cUpload1' class='cbSelect' /&gt;&lt;label for='cUpload1'&gt;&lt;span  id='cbSelectUpload'&gt;&lt;/span&gt;test1&lt;/label&gt;";
  </code></pre>
  
  <p>Then trying to add it to a simple dataSourse like so:</p>
  
  <pre><code>var uploadedFiles = 
  [
      { 
          facility: "Sunrise medical Laboratories", 
          documentName:  "Lab Results",
          documentType: "PDF",
          selected: chkBox
      }
  ];
  </code></pre>
  
  <p>The styles used for the above checkbox aren't applied to the checkbox as nothing is displayed.</p>
  
  <p>Any ideas why it isn't working?</p>
  
  <p>btw, I'm trying to implement all of the above into this <a href="http://jsfiddle.net/OnaBai/rQZNr/21/" rel="nofollow noreferrer">fiddle</a>. <em>The above coding isn't currently in the fiddle.</em></p>
  
  <p><strong>Any help will be appreciated!</strong></p>