Input button event inside Grid not firing using JQuery

Question

I have a input button inside my gridview. I am capturing the button's click event using jquery as bellow and running code behind (basically I am trying to implement the read-unread functionality of email):

  $('.toggleBtn').click(function(e) {
           btnUnreadClicked = true;
$.ajax({
                type: "POST",
                url: "ClaimDetails.aspx/BtnOpenPDF",
                data: "{'id': '" + letterid + "','anchText': '" + anchText + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,

                success: function (msg) {
                    if (msg.d == 'Read') {
                        $tr.removeClass('unreadGridRow');
                        //update unread text to date time now
                        var d = new Date();
                        var replaceUnread = unreadColumn.toString().replace("Unread", d.format("dd/MM/yyyy"));
                        $tr.html(replaceUnread);

                        //update claim letter counts only
                        var parentRow = document.getElementById('__' + parentrowid).innerHTML;
                        var lblUnreadDocCount = $('#__' + parentrowid).find('#lblUnreadDocCount').text();
                        var finalCount = parseInt(lblUnreadDocCount) -1 ; 
                        if(finalCount >= 0)
                        {
                            $('#__' + parentrowid).find('#lblUnreadDocCount').text(finalCount);
                        }

                        if(finalCount == 0 )
                        {
                            //remove the class
                            $('#__' + parentrowid).removeClass('unreadGridRow');
                        }

                        //get count of overall documents and subtract from it
                        var notification = $("#NewLetter3");
                        var numb = notification.text().match(/\d/g);
                        var finaldigits = numb.toString().replace(",", "");
                        var finalTotalDocsCount = parseInt(finaldigits) - 1;
                        if(finalTotalDocsCount >= 0)
                        {      
                            //notification.text(notification.text().replace(numb, finalTotalDocsCount));
                            notification.html("You have " + finalTotalDocsCount + " unread Documents. Please click here to view");
                            //document.getElementById("NewLetter2").innerHTML = notification.text(); 
                            if(finalTotalDocsCount == 0)
                            {
                                $("#NewLetter2").hide();  
                            }
                        }

                        $tr.find(".toggleBtn").text('Un-read');
                    }
                    else  if (msg.d == 'Un-read') {
                         $tr.addClass('unreadGridRow');
                        //update unread text to date time now
                        var unreadDate = new Date();
                        var replaceRead = unreadColumn.toString().replace("Unread", unreadDate.format("dd/MM/yyyy"));
                        $tr.html(replaceRead);

                        //update claim letter counts only
                        var unreadparentRow = document.getElementById('__' + parentrowid).innerHTML;
                        var lblUnreadDocCountUnread = $('#__' + parentrowid).find('#lblUnreadDocCount').text();
                        var finalCountUnread = parseInt(lblUnreadDocCountUnread) + 1 ; 
                        if(finalCountUnread >= 0)
                        {
                            $('#__' + parentrowid).find('#lblUnreadDocCount').text(finalCountUnread);
                        }

                        if(finalCountUnread > 0 )
                        {
                            //remove the class
                            $('#__' + parentrowid).addClass('unreadGridRow');
                        }

                        //get count of overall documents and subtract from it

                        var Unreadnotification = $("#NewLetter3");
                        if(Unreadnotification.text() == "" ) {    Unreadnotification.html("You have 0 ");}
                        var Unreadnumb = Unreadnotification.text().match(/\d/g);
                        var Unreadfinaldigits = Unreadnumb.toString().replace(",", "");
                        var finalTotalDocsCountUnread = parseInt(Unreadfinaldigits) + 1;

                        if(finalTotalDocsCountUnread >= 0)
                        {                                 
                            if(finalTotalDocsCountUnread >= 0)
                            {
                                $("#NewLetter2").show();  
                            }
                            //notification.text(notification.text().replace(numb, finalTotalDocsCount));
                            Unreadnotification.html("You have " + finalTotalDocsCountUnread + " unread Documents. Please click here to view");
                            //document.getElementById("NewLetter2").innerHTML = notification.text(); 


                        }

                        $tr.find(".toggleBtn").text('Read');
                    }
              }
            });

on the same page after the above event I have another event that captures row click as below:

     $("#<%=gvClaimDtSentDate.ClientID%> tr:has(td)").click(function (e) {
                if( $(this).closest('tr').hasClass('parent'))
                {
 if(btnUnreadClicked == false)
                {
                 // do stuff related to row click
                }

                btnUnreadClicked = false;

Now when I click on the button the first time it works fine the event gets called but on second click the event is not called and the functionality inside tr click is run...

but when I refresh the page and do same thing and then refresh again button event is run...

Also when I comment out the ajax portion it is fine...I can't seem to find any syntax errors in there as well.

Answer 1

Change the following code

 $('.toggleBtn').click(function(e) {

to the following

$("body").on("click", ".toggleBtn", function(e){

I think this is what you needed.

Here I added the event to body since I don't know your HTML structure. You should attach the .on to the datagridview or its parent, so that the event doesn't have to bubble too much.

Update:

It is not a good idea to append events on each row, especially when there are too many rows. It will make the script too heavy. So it is recommended to use .on in these cases. In older versions of jQuery you may have to use .live instead of .on.

Answer 2

try following

function pageLoad(sender, args) {
    $('.toggleBtn').click(function(e) {...}
}

this should work. actually in asp.net you should attach all event in pageLoad() function.