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

Следующие изменения исправили проблему;Однако я пометил ответ cantucket как ответ, потому что он направил меня в правильном направлении.

Я добавил строку attr в функцию "createCheckBoxList";сразу после того, как я добавляю полученную таблицу к 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() функция.

Answer 2

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

TO

$('#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);
    });
})