Question

这是我的JS代码。我正在为ul添加div#columns。现在我想为我的每个新li元素添加一些内容，但没有任何反应。相同的代码适用于非动态的元素。如何将我的代码用于新的li元素？我知道问题是我的脚本无法看到我的新元素。

$(document).ready(function () {
$('a.tableName').on('click', function () {
    $.getJSON("/ClientDatabaseManagement/ListColumns", { TableName: $(this).text() }, function (data) {
        var items = [];
        var i = 0; // ilość kolumn
        $.each(data, function (key, val) {
            items.push("<li id='" + key + "' class='" + "list-group-item" + "'>" + val + "</li>");
        });
        $("<ul/>", {
            "class": "list-group checked-list-box",
            html: items.join("")
        }).appendTo("div#columns").hide().animate({ height: 'toggle' }, 1000);
    });   
})

这是不起作用的部分

$('.list-group.checked-list-box .list-group-item').each(function () {
        var $widget = $(this),
            $checkbox = $('<input type="checkbox" class="hidden" />'),
            color = ($widget.data('color') ? $widget.data('color') : "primary"),
            style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
            settings = {
                on: {
                    icon: 'glyphicon glyphicon-check'
                },
                off: {
                    icon: 'glyphicon glyphicon-unchecked'
                }
            };
        $widget.css('cursor', 'pointer')
        $widget.append($checkbox);
        $widget.on('click', function () {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
            $checkbox.triggerHandler('change');
            updateDisplay();
        });
        $checkbox.on('change', function () {
            updateDisplay();
        }); 
    });    
})  
})

Answer 1

尝试以下方法：

$widget.on('click', function () {
        var checkbox =  $(this).find("input:checkbox");
        checkbox.prop('checked', !checkbox.is(':checked'));
        checkbox.triggerHandler('change');
        updateDisplay();
    });

JavaScript更改动态创建的元素

1 个答案: