Why is my PostBack occurring before my jQuery click event?

I'm fairly new to jQuery, but I have some links on my page which should toggle sections of the form visible when clicked, or if javascript is disabled it does a full postback to toggle those sections


It works fine in my test environment, with the PostBack occurring after the jQuery script, but once I deploy it the PostBack occurs before the jQuery click event. It's deployed on a Windows 2003 server running IIS 6.0, while my test environment is Windows XP / IIS 5.1 / VS2010


Here's the code I'm using. The script runs in production if I put it in .ready() instead of .click() but in .click() I don't even get the alert, so I am assuming the issue is with the PostBack occuring before the jQuery script has a chance to execute.


jQuery:

$(document).ready(function () {
     // Toggle Details
     $('.toggleDetailsButton').click(function () {
         alert('test');
         $(this).parentsUntil(".parentRow").parent().next().toggleClass("hidden");
         return false;
     });
 });
 

Code-behind:

Protected Sub rpData_ItemCommand(ByVal sender As Object, ByVal e As RepeaterCommandEventArgs) Handles rpData.ItemCommand
     // Manually toggle rows here
 End Sub
 

ASP:

<asp:Repeater ID="rpData" runat="server">
     <ItemTemplate>
         <tr class="parentRow">
             ...
                 <asp:Button runat="server" ID="cmdViewDetails" 
                     CommandName="ToggleDetails" Text="details"
                     CssClass="buttonAsLink toggleDetailsButton" />
             ...
         </tr>
         <tr id="rpData_DetailsRow" class="detailsRow hidden" runat="server">
 
         </tr>
     </ItemTemplate>
 </asp:Repeater>
 

Edit


Per a suggestion in the comments below, running the jQuery function in onClientClick makes the page act as it should, however I still want to know why the PostBack occurs after the jQuery event in my test environment, but before the jQuery event in production.


I have noticed other differences between the two as well. For example, I also have a button that toggles on/off a search div which works fine in testing but not in production. It uses $('.toggleSearchButton').next() to get the div under the search button and toggles it's class name. In production, this object returns [object Object], however calling .attr('class') returns undefined (so does .attr('id'), .attr('tag') and .nodeName). In my test environment, it returns the correct values for my search div.


I've tested this behavior in IE, FF, and Chrome. On my test machine, it works fine on all 3. On my production machine, only IE works the way it should.

---

Answer:

Try this:

$('.toggleDetailsButton').click(function (e) {
   if (e.stopPropagation) e.stopPropagation();
   if (e.preventDefault) e.preventDefault();

   .
   .
});

By default button renders a submit button. You could also set UseSubmitBehavior="false" to make it an<input type="button" /> element, and see if that gives you better results.