CODEWITHSUNDEEP
jquerydomappearanceon-the-fly
sports
sports

Reputation: 8147

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>

Upvotes: 1

Views: 853

Answers (1)

sports
sports

Reputation: 8147

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

Upvotes: 1

Related Questions