¿Por qué mi publicación previa ocurre antes de mi evento jQuery click?

Question

soy bastante nuevo en jQuery, pero tengo algunos enlaces en mi página que debería alternar secciones de la forma visible al hacer clic, o si javascript está deshabilitado lo hace una devolución de datos completa para cambiar aquellas secciones

funciona bien en mi entorno de prueba, con el PostBack que ocurre después de la secuencia de comandos de jQuery, pero una vez que lo despliego, la publicación previa ocurre antes del evento de clic de jQuery. Se implementó en un servidor Windows 2003 que ejecuta IIS 6.0, mientras que mi entorno de prueba es Windows XP/IIS 5.1/VS2010

Aquí está el código que estoy usando. La secuencia de comandos se ejecuta en producción si lo puse en .ready() en lugar de .click() pero en .click() ni siquiera recibo la alerta, por lo que supongo que el problema es con el posteo que ocurre antes de que el script jQuery tenga la oportunidad de ejecutarse.

jQuery:

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

de código subyacente:

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> 

Editar

por una sugerencia en los comentarios a continuación, ejecutar la función jQuery en onClientClick hace que la página actúe como debería, sin embargo, aún quiero saber por qué se produce el PostBack después del evento jQuery en mi entorno de prueba, pero antes del evento jQuery en producción.

He notado otras diferencias entre los dos también. Por ejemplo, también tengo un botón que activa/desactiva un div de búsqueda que funciona bien en las pruebas pero no en la producción. Utiliza $('.toggleSearchButton').next() para obtener el div debajo del botón de búsqueda y alterna su nombre de clase. En producción, este objeto devuelve [object Object], sin embargo, llamando al .attr('class') devuelve undefined (también .attr('id'), .attr('tag') y .nodeName). En mi entorno de prueba, devuelve los valores correctos para mi div de búsqueda.

He probado este comportamiento en IE, FF y Chrome. En mi máquina de prueba, funciona bien en todos 3. En mi máquina de producción, solo IE funciona como debería.

Answer 1

Prueba esto:

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

    . 
    . 
}); 

Por botón predeterminado rinde un botón de envío. También podría establecer UseSubmitBehavior = "false" para que sea un elemento <input type="button" /> y ver si eso le da mejores resultados.

Answer 2

Eche un vistazo al html resultante. Si ASP.NET se ha inyectado su propia onclick="__DoPostBack..." código necesario para eliminarla usando

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

Answer 3

Tal vez esto?

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

Answer 4

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

}); 

Eso debería ser todo lo que necesita

Answer 5

En realidad asp.neta pone un evento onclick en cada botón, por lo que primero hay que quitar que a partir de su código como el siguiente: -

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

Answer 6

este código está trabajando. lo probé por favor verifique. hacen 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> 

Código detrás de archivo

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