How to set Onclick dynamic to generated rows?

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?

You have to use a delegated action see [this](http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements) — James, May 05 '17 at 14:08

score 1 · Accepted Answer · answered May 05 '17 at 15:37

1

try to update :

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

and add this :

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

answered May 05 '17 at 15:37

姜延涛

51
3

in function value is:[object object].why i am getting object not customer id? – Shridhar Salunkhe May 06 '17 at 06:29
item.CustomerID is an object? if that is, you can to use console.log(item.CustomerID), Check where CustomerID is. – 姜延涛 May 06 '17 at 06:45
yes i want item.CustomerID in function but in alert it shows [object object] – Shridhar Salunkhe May 06 '17 at 06:47
Try changing alert to console.log and then export the result. – 姜延涛 May 06 '17 at 06:49

score 0 · Answer 2 · answered May 05 '17 at 14:04

0

Try to do something like this

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

delegateAction();

After ajax load you can call "delegateAction()", and the event click will be activated.

answered May 05 '17 at 14:04

Marcos Paulo

120
6

How to set Onclick dynamic to generated rows?

2 Answers2