javascript - 如何将 Onclick 动态设置为生成的行？

Question

function GetPage(pageIndex) {
        debugger;
        $.ajax({
            cache: false,
            //url: "/EmailScheduler/",
            url: '@(Url.RouteUrl("EmailScheduler"))',
            type: "POST",
            data: { "selectValue": pageIndex },
            traditional: true,
            dataType: "json",
            success: function (data) {
                debugger;
                $('#GridRows').empty();
                $('#pager').empty();
                var trHTML = '';
                var htmlPager = '';

                $.each(data.Customers, function (i, item) {

                    trHTML += '<table class="table-bordered col-offset-12"><tr style="text-align:center">'
                    +'<td id="tblFirstName"> ' + item.FirstName + '</td>'
                    +'<td id="tblLastName"> ' + item.LastName + '</td>'
                    +'<td id="tblEmailID"> ' + item.EmailID + '</td>'
                    +'<td id="tblCustomerType"> ' + item.CustomerType + '</td>'
                    +'<td id="tblCustomerDesignation"> ' + item.CustomerDesignation + '</td>'
                    +' <td><div class="checkbox control-group"><label><input type="checkbox" id="item.CustomerID" value="item.CustomerID"  onclick="AddRemoveCustomer(item.CustomerID)" class="checkBoxClass"/></label></div></td></tr></table>'
                });
                $('#GridRows').append(trHTML);

                if (data.Pager.EndPage > 1) {
                    htmlPager += '<ul class="pagination">'
                    if (data.Pager.CurrentPage > 1) {
                        htmlPager += '<li><input class="myButton" style="width:25px;height:25px;" type="button" id="1" style="font-weight:bold;" value="<<" /></li><li><input type="button"  class="myButton" id="' + (data.Pager.CurrentPage - 1) + '"value="<"></li>'
                    }

                    for (var page = data.Pager.StartPage; page <= data.Pager.EndPage; page++) {
                        htmlPager += '<li class="' + (page == data.Pager.CurrentPage ? "active" : "") + '"><input type="button"  class="myButton" id="' + page + '" value="' + page + '"/></li>'
                    }

                    if (data.Pager.CurrentPage < data.Pager.TotalPages) {
                        htmlPager += '<li><input type="button"  class="myButton" id="' + (data.Pager.CurrentPage + 1) + '" value=">"/></li><li><input type="button" class="myButton" id="' + (data.Pager.TotalPages) + '"  value=">>"/></li>'
                    }

                    htmlPager += '</ul>'
                }
                $('#pager').append(htmlPager);

            },
            error: function (jqXHR, textStatus, errorThrown) {
                debugger;
            }
        });
    }

**

Scenario:-

**

In this ajax table rows generated.

How to call onClick function for checkbox in Ajax generated rows?

I want to call onClick function in which checked id's stored in hidden field.

what should i do?

Answer 1

尝试更新:

+' <td><div class="checkbox control-group"><label><input 
type="checkbox" id="'+item.CustomerID+'" 
value="'+item.CustomerID+'" class="checkBoxClass"/>
</label></div></td></tr></table>'

并添加此:

$(document).on('click',  '#GridRows .checkBoxClass'  ,    
function(){
    alert('hello');//todo something....
});