Problem with jquery append & appendTo

Question

Hi All I was trying to use append to put the block content onto bottom of body and show with absolute position, but when display it my input checkbox becoming non clickable on on FF. Has anyone faced this kind of issue ?

Thanks

js:

var box = $('#subbox');
box.css('top',  200);
box.css('left', 300);     
$(document.body).append(box);

HTML:

  <div id="Subbox" class="subbox">
    <input type="checkbox" checked="checked"> 
  </div>

css:

  .subbox {
position:absolute !important;
z-index: 5 !important;
background-color: #eee;
padding: 5px;
margin:0px;
margin-top:0px; 
border:1px solid #ccc;
}

Answer 1

Hi

Since I don't fully understand your question (what does "crackable" mean?) I will go for the obvious things to mention here.

First of all, I'd like to say that in general, it's a bad idea to use the same name for IDs and class names in the same document. Even with one of them having a capital letter, it's just not very nice.

Secondly, the HTML is invalid, because the INPUT tag has no ending. Always make sure the HTML is valid (or at least not entirely broken) before trying anything else.

Answer 2

Are you generating <div id="Subbox" /> and its contents in JavaScript?

If I've understood correctly, are you looking for something like this?

$(function() {

    var cssObject = { top: 200, left: 300 }

    $('<div id="Subbox" class="subbox">')
        .append('<input type="checkbox" checked="checked"/>')
        .css(cssObject)
        .appendTo(document.body);

});

Working Demo here (add /edit to the URL to edit the demo)

Tested in Firefox 3.0.8 and IE6 and it works correctly.