jquery - Jquery 不会在动态内容上添加样式

Question

我正在向 HTML 动态添加复选框，而 jquery 不会更新样式。我读到了类似的问题，并试图在父级上调用 .trigger("create") 但仍然不起作用。以下是小提琴内容：http: //jsfiddle.net/ftraian/A4duX/1/

<div id="checkboxes"></div>
Enter new labels here: <textarea></textarea>

以及从 textarea 读取标签并将它们添加到复选框 div 的脚本：

var index = '1';

$(document).ready(function () {
    var text = 'Predifined label';
    var cbElem = $("<input type=\"checkbox\" id=\"" + index + "\">");
    var labelElem = $("<label for=\"" + index + "\">" + text + "</label>&nbsp;");
    $('#checkboxes').append(cbElem, labelElem);
    $('#checkboxes').buttonset();
});

$('textarea').bind("enterKey", function () {
    index++;
    var text = $('textarea').val().replace(/(\r\n|\n|\r)/gm, "");
    var cbElem = $("<input type=\"checkbox\" id=\"" + index + "\">");
    cbElem.button();
    var labelElem = $("<label for=\"" + index + "\">" + text + "</label>&nbsp;");
    $('#checkboxes').append(cbElem, labelElem);
    $('#checkboxes').trigger("create");
    $('textarea').val('');
});
$('textarea').keyup(function (e) {
    if (e.keyCode == 13) {
        $(this).trigger("enterKey");
    }
});

Answer 1

演示

删除行：

cbElem.button();

并在事件结束时添加以下行bind()：

$('#checkboxes').buttonset();

旁注：bind()从 jQuery 1.7 中弃用，on应该使用（尽管这不是你的问题的原因）。