title: how to properly dynamically add a checkbox and position it with jquery
body: <p>I am trying to use jquery to:</p>
  
  <p>1- dynamically add a checkbox 
   2- position it correctly. </p>
  
  <p>So far I can do 1 or 2 but not 1 and 2. </p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;!-- language: lang-html --&gt;
  &lt;body&gt;   
   &lt;div id='myDiv'&gt;&lt;/div&gt;
   &lt;div id='myOtherDiv'&gt;
   &lt;button id='myButton'&gt;my button&lt;/button&gt;
   &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>
  
  <p>and here is my js code:</p>
  
  <pre><code>&lt;!-- language: lang-js --&gt;
  jQuery(document).ready(
  
  function ($)
  {
    jQuery.noConflict();
  
  function createCheckbox()
  {
  var   $myCheckbox   = $('&lt;input id="myCheckbox" type="checkbox"&gt;&lt;/input&gt;&lt;label for="myCheckbox"&gt;my checkbox&lt;/label&gt;');
   $('#myDiv').append($myCheckbox);
  
   /*                                                                                                                                                          
    The following line fixes the "button displayed as unpressed" problem                                                                          
    but it breaks the .position call                                                                                                                           
   */
   // $myCheckbox = $('#myDiv &gt; input');                                                                                                                       
  
      /* myCheckbox */
     $myCheckbox.button({
                        text: false,
                        icons: { primary: "ui-icon-refresh"}
        });
  
    $myCheckbox.change(
        function()
                {
                    if($myCheckbox.is(":checked"))
                    { alert('checked'); }
          else
                    {   alert('unchecked');}
                }
      );
  
  var $myButton = $('#myButton');
  $myCheckbox.position({my:"left", at:"right", of:$myButton });
  }
  
  createCheckbox();
  
  });
  </code></pre>
  
  <p>The code above works but after clicking on the checkbox and clicking "OK" on the "checked" alert, the jquery checkbox button is displayed as unchecked even though the actual checkbox is checked.</p>
  
  <p>By trial and error I fixed that problem by reselecting my checkbox after append. I am not sure why that works though. </p>
  
  <pre><code>$myCheckbox = $('#myDiv &gt; input');
  </code></pre>
  
  <p>When I uncommenting the line above, then the checkbox behaves properly and is displayed as checked when it is checked. But then the call to .position does not position the checkbox button properly. </p>
  
  <p>see: <a href="http://jsfiddle.net/roumbaba/uM3sS/1/" rel="nofollow">http://jsfiddle.net/roumbaba/uM3sS/1/</a></p>
  
  <p>note: This problems only occurs when i dynamically add an input/checkbox. If I only add a simple button (using a plain  instead of  then both position and checked display satus work fine.</p>
  
  <p>I am clearly missing something major here in how the whole process works. In particular I do not understand why reselecting my checkbox with the  line</p>
  
  <pre><code> $myCheckbox = $('#myDiv &gt; input');
  </code></pre>
  
  <p>changes the behavior of the check status button. And why does position not work after I do that.</p>