Perché il mio PostBack si verifica prima del mio evento click jQuery?

Question

Sono abbastanza nuovo per jQuery, ma ho alcuni collegamenti sulla mia pagina che dovrebbero commutare le sezioni del modulo visibili quando si fa clic, o se javascript è disabilitato fa un postback completo per alternare quelle sezioni

Funziona bene nel mio ambiente di test, con PostBack che si verifica dopo lo script jQuery, ma una volta distribuito, PostBack si verifica prima dell'evento click di jQuery. È distribuito su un server Windows 2003 con IIS 6.0, mentre il mio ambiente di test è Windows XP/IIS 5.1/VS2010

Ecco il codice che sto utilizzando. Lo script viene eseguito in produzione se lo inserisco in .click() anziché .click(), ma in .click() non riesco nemmeno a ricevere l'avviso, quindi presumo che il problema riguardi PostBack prima che lo script jQuery abbia la possibilità di eseguirlo.

jQuery:

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

Codice-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> 

Modifica

Per un suggerimento nei commenti seguenti, l'esecuzione della funzione jQuery in onClientClick fa sì che la pagina si comporti come dovrebbe, tuttavia desidero ancora sapere perché PostBack si verifica dopo l'evento jQuery nel mio ambiente di test, ma prima dell'evento jQuery in produzione.

Ho notato anche altre differenze tra i due. Ad esempio, ho anche un pulsante che attiva/disattiva un div di ricerca che funziona bene nei test ma non in produzione. Utilizza $('.toggleSearchButton').next() per ottenere il div sotto il pulsante di ricerca e commuta il suo nome di classe. In produzione, questo oggetto restituisce [object Object], tuttavia chiamando .attr('class') restituisce undefined (così fa .attr('id'), .attr('tag') e .nodeName). Nel mio ambiente di test, restituisce i valori corretti per il mio div di ricerca.

Ho provato questo comportamento in IE, FF e Chrome. Sulla mia macchina di prova, funziona bene su tutto 3. Sulla mia macchina di produzione, solo IE funziona come dovrebbe.

Answer 1

Prova questo:

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

    . 
    . 
}); 

Di pulsante predefinito rende un pulsante di invio. È anche possibile impostare UseSubmitBehavior = "false" per renderlo un elemento <input type="button" /> e vedere se questo offre risultati migliori.

Answer 2

Dai un'occhiata all'html risultante. Se ASP.NET hanno iniettato il proprio onclick="__DoPostBack..." codice è necessario rimuoverlo utilizzando

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

Answer 3

Forse questo?

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

Answer 4

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

}); 

Questo dovrebbe essere tutto il necessario

Answer 5

realtà asp.net mette un evento onclick su ogni pulsante, quindi prima è necessario rimuovere che dal codice in questo modo: -

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

Answer 6

questo codice sta funzionando. l'ho provato per favore controlla fanno 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> 

codice dietro file di

  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(); 
       } 
      }