jQuery-Ajax 创建的 Checkboxlist 不响应点击

Question

我有一个单选按钮列表（rblcategories），更改选定值时，我使用ajax创建一个复选框列表并填充它。当任何复选框被选中/取消选中时，我需要更新我的数据表，但我无法让它响应状态变化。

这就是我所拥有和尝试过的（我删除了所有不必要的东西，如样式等）

<div class="row">
    <div class="col-sm-2">
        <label for="ddlYear">Select Year</label>
        <asp:DropDownList runat="server" ID="ddlYear" ClientIDMode="Static">
        </asp:DropDownList>
    </div>
    <div class="col-sm-4">
        <label for="rblCategories">Categories</label>
        <asp:RadioButtonList runat="server"
            ID="rblCategories" 
            ClientIDMode="Static" 
            DataTextField="Name" 
            DataValueField="TypeID" 
            AppendDataBoundItems="true">
        </asp:RadioButtonList>
    </div>
    <div class="col-sm-6" id="divSubCategory">
    </div>
</div>

//Using the selected values of ddlYear and rblCategories, populate table
function bindDataTable() {
    var year = $('#ddlYear').val();
    var selCategoryID = $('#rblCategories input:checked').val()
    var url = "";
    var params = "";

    // -1 refers to "All" categories
    if ('-1' == selCategoryID) {
        url = "../services/exp.asmx/GetExpenseByYear";
        params = JSON.stringify({ "Year": year });
    }
    else {
        url = "../services/exp.asmx/GetExpenseByYearByCategory";
        params = JSON.stringify({ "Year": year, "CategoryID": selCategoryID });
    }
    populteTable(url, params, tblExpenses);
}

//for testing
function bindDataTable(subCategories) {debugger
}

// create and populate sub-category checkbox list based on selected category
function updateSubTypes(typeID) {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: '<%=ResolveUrl("~/services/exp.asmx/GetExpenseSubTypeItems") %>',
        cache: false,
        data: "{ 'TypeID': '" + typeID + "' }",
        success: AjaxSucceeded,
        error: AjaxFailed
    });
}

function AjaxFailed(result) {
   alert('Failed to load checkbox list');
}

function AjaxSucceeded(result) {
    BindCheckBoxList(result);
}

function BindCheckBoxList(result) {
    $('#divSubCategory').empty();
    var items = JSON.parse(result.d);
    if (items.length > 0)
        CreateCheckBoxList(items);
}

function CreateCheckBoxList(checkboxlistItems) {
    var lbl = $('<label></label>').text('Sub-Categories');
    $('#divSubCategory').append(lbl);
    var table = $('<table></table>').attr({ id: 'cblSubCategory', class: 'form-control' });
    var row = table.append($('<tr></tr>'));
    var counter = 0;

    $(checkboxlistItems).each(function (i) {
        row.append($('<td></td>').append($('<input>').attr({
            type: 'checkbox', name: 'chklistitem', value: this.ExpenseSubTypeID, id: 'chklistitem' + counter
        })).append(
        $('<label>').attr({
            for: 'chklistitem' + counter++
        }).text(this.Name)));
    });
    $('#divSubCategory').append(table);
}

$(document).ready(function () {
    $('#rblCategories input').change(function () {
        var selCategoryID = $(this).val();
        if (selCategoryID != null) {
            updateSubTypes(selCategoryID)
        }
        bindDataTable();
    });

    // This never gets hit; I tried chklistitem instead of cblSubCategory too
    $('#cblSubCategory input').change(function () {debugger
        var selCategoryID = $('#rblCategories input:checked').val()
        var names = $('.parent input:checked').map(function () {
            return this.name;
        }).get();
        bindDataTable(names);
    });
})

Answer 1

$('#cblSubCategory input').change(function () {

到

$('#cblSubCategory').on('change','input', function () {

动态加载元素时使用 jQuerys .on() 方法，该方法将查找添加到 DOM 中与该选择器匹配的任何新元素。否则 jQuery 只会在初始执行时解析一次 DOM。

$(document).ready(function () {
    $('#rblCategories').on('change','input', (function () {
        var selCategoryID = $(this).val();
        if (selCategoryID != null) {
            updateSubTypes(selCategoryID)
        }
        bindDataTable();
    });

    // This never gets hit; I tried chklistitem instead of cblSubCategory too
    $('#cblSubCategory').on('change','input', function () {debugger
        var selCategoryID = $('#rblCategories input:checked').val()
        var names = $('.parent input:checked').map(function () {
            return this.name;
        }).get();
        bindDataTable(names);
    });
})

Answer 2

以下更改解决了该问题；但是，我将 cantucket 的回复标记为答案，因为他让我朝着正确的方向前进。

我在“createCheckBoxList”函数中添加了一条 attr 行；在我将结果表附加到 div 之后：

function createCheckBoxList(checkboxlistItems) {
    var lbl = $('<label></label>').text('Sub-Categories');
    $('#divSubCategory').append(lbl);
    var table = $('<table></table>').attr({ id: 'cblSubCategory', class: 'form-control' });
    var row = table.append($('<tr></tr>'));
    var counter = 0;

    $(checkboxlistItems).each(function (i) {
        row.append($('<td></td>').append($('<input>').attr({
            type: 'checkbox', name: 'cblSubCategory', value: this.ExpenseSubTypeID, id: 'cblSubCategory' + counter
        })).append(
        $('<label>').attr({
            for: 'cblSubCategory' + counter++
        }).text(this.Name)));
    });
    $('#divSubCategory').append(table);

    // added this line
    $('#divSubCategory').attr({ onclick: "onSubCatChange()" });
}

我添加了“onSubCatChange()”函数：

function onSubCatChange() {
    // Both following methods work to get list o checked items
    var names = [];
    $('#cblSubCategory input:checked').each(function() {
        names.push(this.value);
    });

    var names2 = $('#cblSubCategory input:checked').map(function () {
        return this.value;
    }).get();

    bindDataTable(names);
}

并且我在 document.ready() 函数中删除了复选框列表的更改处理程序。