如何将 Onclick 动态设置为生成的行？答案

【问题标题】：How to set Onclick dynamic to generated rows?如何将 Onclick 动态设置为生成的行？
【发布时间】：2017-05-05 13:10:07
【问题描述】：

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

场景：-

在这个ajax表中生成行。

如何在 Ajax 生成的行中调用复选框的 onClick 函数？

我想调用 onClick 函数，其中检查的 id 存储在 hidden 字段。

我该怎么办？

【问题讨论】：

你必须使用委托操作见this

标签： javascript jquery ajax model-view-controller onclick

【解决方案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....
});

【讨论】：

函数值是：[object object]。为什么我得到的对象不是客户ID？
item.CustomerID 是一个对象吗？如果是这样，您可以使用console.log(item.CustomerID)，检查CustomerID 在哪里。
是的，我希望 item.CustomerID 在函数中，但在警报中它显示 [object object]
尝试将alert更改为console.log，然后导出结果。

【解决方案2】：

尝试做这样的事情

function delegateAction(){
    $('.checkBoxClass').click(function(event){
      // do some action
    });
}

delegateAction();

ajax加载后可以调用“delegateAction()”，点击事件会被激活。

【讨论】：