javascript - 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 输入').change(function () {

致

$('#cblSubCategory').on('更改','输入', function () {

动态加载元素时使用 jQuery 的 .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);
    });
})