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.

@Wolf nothing and even if I remove the tr event it doesnt do anything....I have got input button and have tried anchor element too same results — Zaki, Jan 14 '13 at 18:02

Wolf · Accepted Answer · 2013-01-15T11:08:42.767

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.

edited Jan 15 '13 at 11:08

answered Jan 14 '13 at 18:14

Wolf

2,150
1
15
11

I already have a ready function and the click event is inside it...also tried your suggestion but it is throwing syntax error – Zaki Jan 15 '13 at 08:44
Found the problem...As I am replacing the row's text in following line, it was getting rid of event, so placed a label and changed the text instead of replacing the whole row... var replaceUnread = unreadColumn.toString().replace("Unread", d.format("dd/MM/yyyy")); – Zaki Jan 15 '13 at 09:51
It is not a good idea to append events on each rows, especially when there are too many rows. It will make the script too heavy. So it is recommended to use `.on`. Which version of jquery you are using? In older versions, use `.live` instead of `.on`. – Wolf Jan 15 '13 at 11:07
Then it is `.live` method, that you have to use.. :) and always try to go with the latest, unless you have to change too much. :) – Wolf Jan 15 '13 at 12:59

score 0 · Answer 2 · answered Jan 14 '13 at 18:25

0

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.

answered Jan 14 '13 at 18:25

Tuhin

11
1

Input button event inside Grid not firing using JQuery

2 Answers2