как использовать jquery appendTo

Question

Я пытался использовать append, чтобы поместить содержимое блока в нижнюю часть тела и отобразить в абсолютном положении, но при отображении флажок ввода становится недоступным для нажатия в Firefox.

В чем проблема?

ЯШ:

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

Вы генерируете <div id="Subbox" /> и его содержимое в JavaScript?

Если я правильно понял, вы ищете что-то подобное?

$(function() {

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

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

});

Рабочая демонстрация здесь (добавьте / edit к URL для редактирования демонстрации)

Протестировано в Firefox 3.0.8 и IE6 и работает правильно.

Answer 2

Поскольку я не до конца понимаю ваш вопрос (что означает «взломанный»?), Я пойду к очевидным вещам, которые стоит упомянуть здесь.

Прежде всего, я хотел бы сказать, что в общем случае плохая идея использовать одно и то же имя для идентификаторов и имен классов в одном и том же документе. Даже если у одного из них есть заглавная буква, это не очень приятно.

Во-вторых, HTML-код недействителен, поскольку у тега INPUT нет конца. Всегда проверяйте, верен ли HTML (или, по крайней мере, не полностью нарушен), прежде чем пытаться что-либо еще.