Dlaczego mój postBack występuje przed zdarzeniem kliknięcia jQuery?

Question

Jestem całkiem nowy w jQuery, ale mam kilka linków na mojej stronie, które powinny przełączać sekcje formularza widoczne po kliknięciu, lub jeśli javascript jest wyłączony, robi pełny odświeżenie, aby przełączyć te sekcje

Działa dobrze w moim środowisku testowym, gdy PostBack występuje po skrypcie jQuery, ale po wdrożeniu go PostBack występuje przed zdarzeniem kliknięcia jQuery. Został on wdrożony na serwerze Windows 2003 z IIS 6.0, podczas gdy moim środowiskiem testowym jest Windows XP/IIS 5.1/VS2010

Oto kod, którego używam. Skrypt uruchamia się, jeśli wstawię go do .ready() zamiast .click(), ale w .click() nie otrzymuję nawet alertu, więc zakładam, że problem dotyczy PostBack, zanim skrypt jQuery ma szansę na wykonanie.

jQuery:

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

Code-tył:

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

za sugestię w komentarzach poniżej uruchomienie funkcji jQuery w onClientClick powoduje, że strona działa tak, jak powinna, ale nadal chcę wiedzieć, dlaczego PostBack występuje po zdarzeniu jQuery w moim środowisku testowym, ale przed zdarzeniem jQuery w produkcji.

Zauważyłem także inne różnice między tymi dwoma. Na przykład, mam również przycisk, który włącza/wyłącza dział wyszukiwania, który działa dobrze w testowaniu, ale nie w produkcji. Używa $('.toggleSearchButton').next(), aby uzyskać div pod przyciskiem wyszukiwania i przełącza jego nazwę klasy. W produkcji obiekt ten zwraca [object Object], jednak wywołanie .attr('class') zwraca undefined (podobnie jak .attr('id'), .attr('tag') i .nodeName). W moim środowisku testowym zwraca poprawne wartości dla mojego elementu div wyszukiwania.

Testowałem to zachowanie w IE, FF i Chrome. Na moim komputerze testowym działa dobrze na wszystkich 3. Na mojej maszynie produkcyjnej tylko IE działa tak, jak powinno.

Answer 1

Spróbuj tego:

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

    . 
    . 
}); 

Domyślnie przycisk renderuje przycisk Prześlij. Możesz także ustawić UseSubmitBehavior = "false", aby ustawić go jako element <input type="button" /> i sprawdzić, czy to daje lepsze wyniki.

Answer 2

Spójrz na wynikowy html. Jeśli ASP.NET wstrzyknięcia swój własny kod onclick="__DoPostBack..." trzeba go usunąć przy użyciu

$('.toggleDetailsButton').removeAttr('onclick') 
    .click(function(e){ 
     e.preventDefault(); 
     ... 
}); 

Answer 3

Może to?

$('.toggleDetailsButton') 
    .unbind('click') 
    .bind('click', function() { 
     // etc 
}); 

Answer 4

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

}); 

To powinno być wszystko trzeba

Answer 5

Właściwie asp.net umieszcza zdarzenie onclick na każdym przycisku, więc najpierw musisz usunąć to ze swojego kodu w ten sposób: -

$(document).ready(function() { 
$('.toggleDetailsButton').removeAttr('onclick'); 
$('.toggleDetailsButton').click(function (e) { 
    alert('yes'); 
    e.preventDefault(); 
    return false; 
    }); 
}); 

Answer 6

ten kod działa. testowałem to proszę sprawdzić. zrobić EnableEventValidation = "false"

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sortable.aspx.cs" Inherits="Sortable" EnableEventValidation="false" %> 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head runat="server"> 
      <title>Sortable</title> 

      <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script> 

      <script language="javascript" type="text/javascript"> 
       function xyz() { 
        alert('test'); 
        $(this).parentsUntil(".parentRow").parent().next().toggleClass("hidden"); 

       } 

      </script> 

     </head> 
     <body> 
      <form id="form1" runat="server"> 
      <div> 
       <asp:Repeater ID="rpData" runat="server"> 
        <ItemTemplate> 
         <tr class="parentRow"> 
          <asp:Button runat="server" ID="cmdViewDetails" CommandName="ToggleDetails" Text="details" 
           CssClass="buttonAsLink toggleDetailsButton" OnClientClick="javascript:xyz();" /> 
         </tr> 
         <tr id="rpData_DetailsRow" class="detailsRow hidden" runat="server"> 
         </tr> 
        </ItemTemplate> 
       </asp:Repeater> 
      </div> 
      </form> 
     </body> 
     </html> 

kod związany z pliku

  using System; 
      using System.Collections.Generic; 
      using System.Linq; 
      using System.Web; 
      using System.Web.UI; 
      using System.Web.UI.WebControls; 

      public partial class Sortable : System.Web.UI.Page 
      { 
       protected void Page_Load(object sender, EventArgs e) 
       { 
        List<string> l = new List<string>(); 
        l.Add("A"); 
        l.Add("B"); 
        l.Add("C"); 
        rpData.DataSource = l; 
        rpData.DataBind(); 
       } 
      }