asp.net button works once and then stops working

Question

I have a imagefield that only works once as first time it displays messagebox but when I close messagebox using cancel button , here is how I am

<script type="text/javascript">
 $(document).ready(function() { 

 $('#<%= imagebutton1.ClientID %>').click(function() {
        alert('hello');  // ONLY WORKS once 
        $.blockUI({message: $('#mainInsert')}); 
    });

 $('#<%= Button2.ClientID %>').click(function() { 
        $.unblockUI(); 
    });
}); 
</script>

Here is how I definsedh my image button

<br />
<asp:ImageButton ID="imagebutton1" runat="server" ImageAlign="Right" ImageUrl="/_layouts/n.png" />
<br />
<br />

Here's cancel button code,

 <div id="mainInsert" style="display: none; cursor: default">
    <asp:Button ID="Button2" Text="Cancel" runat="server" CssClass="rightButton" />
</div>

Answer 1

You may be bubbling through to other events. Be sure to stop propogation through the click events of the parents and children.

<script type="text/javascript">
 $(document).ready(function() { 

 $('#<%= imagebutton1.ClientID %>').click(function(event) {
        alert('hello');  // ONLY WORKS once 
        $.blockUI({message: $('#mainInsert')}); 
        event.stopPropagation();
    });

 $('#<%= Button2.ClientID %>').click(function(event) { 
        $.unblockUI(); 
        event.stopPropagation();
    });
}); 
</script>

I am not certain that will solve it, but that seems to be a good first shot.

Joey

Answer 2

Instead of this,

 $('#<%= imagebutton1.ClientID %>').click(function() {

I used onclick and put code in custom JS function to make it work, as on postback it was losing events attached to controls.