Search code examples
jquerydomappearanceon-the-fly

Checkbox and label created on the fly

When I create a checkbox and a label "on the fly" with jQuery, it works fine respect to its functionality (that is: if I click the label, the checkbox is checked), but the default visual appearance that the browser assigns to the label isn't the same as the default visual appearance assigned for a label created not-on-the-fly.

[x] normal label
[x]label created on the fly

The difference is a space (a margin) between the label and the check box.

Any ideas on what is happening here?

The code for the checkbox/label creation on the fly is the following:

 $('<input type="checkbox" id="foo"/><label for="foo">bar</label>')

The code for the checkbox/label creation not-on-the-fly is the following:

 <input type="checkbox" id="baz"/><label for="baz">quz</label>
Solution

  • This is what was happening: http://jsfiddle.net/kSjJZ/

     <body>
     <ul id="bla">
         <li>
             <input type="checkbox" id="baz"/><label for="baz">quz</label>
         </li>
         <li>
             <input type="checkbox" id="foo"/>
             <label for="foo">quz</label>
         </li>
     </ul>
 </body>

    Basically, theres a space interpretation if these two tags (input and label) are separated by a \r\n