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 () {

TO

$('#cblSubCategory').on('change','input', 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);
    });
})

Answer 2

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

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

#include <stdio.h>   //including for the use of printf

/* == FUNCTION PROTOTYPES == */
int getNum(void);

/* === COMPILER DIRECTIVE - to ignore the sscanf() warning === */
#pragma warning(disable: 4996)


int main(void)
{   
// defining varibles
int myArray[11] = { 0 };
int counter = 0;
int indexTracker = -1;
int numInput = 0;
int lowestNum = 0;
int lowestNumPlace = 0;

// printing as to why I need 10 numbers
printf("I require a list of 10 numbers to save the world!\n");

// while loop
// while 'counter' is less than or equal to 9, loop
while (counter <= 9)
{
    // adding 1 to each varible, everytime the program loops
    indexTracker += 1;
    counter += 1;

    // printing to request a number, giving which number they are 
            // inputting
    // out of the list of 10
    // calling getNum() for input, saving the number into the array
    printf("Please enter a number for #%d: ", counter, "spot\n");
    numInput = getNum();
    myArray[indexTracker] = numInput;

    if (numInput <= myArray[indexTracker])
    {
        lowestNum = numInput;
        lowestNumPlace = indexTracker;
    }
}
// printing the lowest value and its index
printf("The lowest number is: %d at index [%d].", lowestNum, 
lowestNumPlace);

return 0;
}

我添加了“ onSubCatChange（）”功能：

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()" });
}

然后我在document.ready（）函数中删除了更改处理程序上的复选框列表。

jQuery-Ajax创建的Checkboxlist无法响应点击

2 个答案: