Event handler for dynamically created checkboxes doesn't work
<p>I want to use my own event handler for all five checkboxes.
I create one checkbox in the code and then clone it four times.</p>

<p>My problems with this code: I can check and uncheck the first checkbox (the checkbox in the code).
But the first checkbox doesn't use my event handler but its own (I set a breakpoint in my
"$('input:checkbox').live('click', function (event) {..." code and it is never reached if I click the first checkbox.
The four other boxes reach my event handler but all four get checked if I click only at one.
And I can only check the four boxes if the first box (the one in the code) is checked and I can only uncheck them if the first box is unchecked. There seems to be a lot of side effects I don't understand.
This is the full code:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;title&gt;My Page&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /&gt;
&lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onfocus="readvalues()"&gt;
&lt;div id="mypage" data-role="page" data-theme="a"&gt;
&lt;script&gt;
$(document).ready(function () {
   $('input:checkbox').live('click', function (event) {       
    event.preventDefault();
    event.stopPropagation();
    if ($(this).prop('checked')) {
         $(this).prop('checked', false);
         //$(this).removeAttr('checked');
         $(this).checkboxradio("refresh");
         //$(this).attr("checked",false).checkboxradio("refresh");
     } else {
         $(this).prop('checked', true);    
         //$(this).attr('checked', true);
         $(this).checkboxradio("refresh");
     }
     //$(this).prop('checked', true);    
     //$(this).attr('checked', true).checkboxradio('refresh');
     $(this).checkboxradio("refresh");
     //$(selector).trigger('create');    
   });
});    
&lt;/script&gt;

  &lt;div data-role="fieldcontain" id="fieldcontainid"&gt;
    &lt;fieldset data-role="controlgroup" id="fieldsetid"&gt;
       &lt;div id="sample"&gt;
       &lt;input id="checkboxsample" class="custom" type="checkbox" data-iconpos="left" name="checkboxsample"&gt;
       &lt;label id="labelsample" for="checkboxsample"&gt;Test&lt;/label&gt;
       &lt;/div&gt;
       &lt;div id="existing"&gt;&lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/div&gt;
&lt;script&gt;
readvalues = function()
{

    var existing = document.getElementById('existing');
    existing.textContent = '';

    for (i=0; i&lt;=3; i++)  
    {  
        var clonecheckbox = $("#sample").clone(false);
        $("#existing").append(clonecheckbox);
        clonecheckbox.attr("id",i.toString());
        $("#"+i.toString()).children().children().eq(0).attr("id","cb"+i.toString());
        $("#"+i.toString()).children().children().eq(0).attr("name","cb"+i.toString());

        $("#"+i.toString()).children().children().eq(1).attr("id","label"+i.toString());
        $("#"+i.toString()).children().children().eq(1).attr("for","cb"+i.toString());
    }
}
&lt;/script&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>What changes have I to do in my code to use my own event handler four all five checkboxes?
Is my event handling to check/uncheck checkboxes correct?</p>
