image button doesnt fire jQuery / postback after first postback?

0
votes

I've got an asp.net web app that has an update panel. Inside of the update panel I have a grid view control. In the grid view control I have two buttons notice the visibility:

<ItemTemplate>
  <asp:ImageButton class="DeleteLineItem" style="display:none;" ID="ibDelete2" runat="server" CommandName="DeleteRow" ImageUrl="images/d.gif" ToolTip="Delete Line Item?" />
  <asp:ImageButton class="TempDeleteLineItem" ID="ibTempDelete" OnClientClick="return false;" runat="server" ToolTip="Delete Line Item?" ImageUrl="images/d.gif" />
</ItemTemplate>

Notice the first ones display is set to none the reason I do this is you will notice the second one has an onclientclick="return false;". When I click the button with id ibTempDelete it calls some jquery to remove a row from my gridview and then it triggers the click event of the ibDelete2 button (the one that's hidden). The jquery for that is here:

$(".TempDeleteLineItem").click(function() { 
    $(this).closest("tr").fadeOut(3000, function() { 
        alert('hi');
        __doPostBack($(this).closest ('tr').find ('.DeleteLineItem').attr('name'), "");
        $(this).remove();
    }); 
});

I find the row and fade it out, do a post back by calling the DeleteLineItem event and removing the row. Now when I first load my web page (assume there are 3 records in the grid view). When my page loads I can easily click the ibTempDelete button and it calls the jquery, fades out the row, alerts hi, does the post back and removes the row...it works basically! Great so what is my problem?

My problem is immediately after this post back (now I have 2 rows in my gridview) if I try to click the ibTempDelete button nothing happens, it appears it is no longer clickable? The alert doesnt even display.

So my question is my lack of understanding on how asp.net and postbacks work. As soon as I hit the first postback why is the button no longer clickable?

2
jqueryasp.net

2 Answers

2
votes

When you call __doPostBack the page is anyways going to be refreshed why are you calling $(this).remove(). May be you can call it before calling __doPostBack. When the page is freshly loaded even after postback the event handlers should work as it is. Try this using live.

$(".TempDeleteLineItem").live('click', function() { 
    $(this).closest("tr").fadeOut(3000, function() { 
        $(this).hide().find('.DeleteLineItem').click();
    }); 
});
0
votes

Shankar helped me in the chat, we ended up doing this:

$(".TempDeleteLineItem").live('click', function() { 
    var $this = $(this);
    $(this).closest("tr").fadeOut(1000, function() { 
       $(this).hide();
       $this.prev('.DeleteLineItem').click();
    }); 
    return false;
});