为什么我的 PostBack 在我的 jQuery 点击事件之前发生？答案

【问题标题】：Why is my PostBack occurring before my jQuery click event?为什么我的 PostBack 在我的 jQuery 点击事件之前发生？
【发布时间】：2012-02-18 17:11:59
【问题描述】：

我是 jQuery 的新手，但我的页面上有一些链接应该在单击时切换表单的可见部分，或者如果禁用了 javascript，它会执行完整的回发以切换这些部分

它在我的测试环境中运行良好，PostBack 发生在 jQuery 脚本之后，但是一旦我部署它，PostBack 就会发生在 jQuery 单击事件之前。它部署在运行 IIS 6.0 的 Windows 2003 服务器上，而我的测试环境是 Windows XP / IIS 5.1 / VS2010

这是我正在使用的代码。如果我将脚本放在.ready() 而不是.click() 但在.click() 我什至没有收到警报，则脚本在生产中运行，所以我假设问题是在 jQuery 脚本有机会之前发生的 PostBack执行。

jQuery:

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

代码隐藏：

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

平均售价：

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

编辑

根据下面 cmets 中的建议，在onClientClick 中运行 jQuery 函数会使页面按应有的方式运行，但是我仍然想知道为什么 PostBack 在我的测试环境中的 jQuery 事件之后发生，但在 jQuery 之前生产中的事件。

我还注意到两者之间的其他差异。例如，我还有一个按钮可以打开/关闭搜索 div，该按钮在测试中可以正常工作，但在生产中却不行。它使用$('.toggleSearchButton').next() 来获取搜索按钮下的 div 并切换它的类名。在生产中，此对象返回[object Object]，但调用.attr('class') 会返回undefined（.attr('id')、.attr('tag') 和.nodeName 也是如此）。在我的测试环境中，它会为我的搜索 div 返回正确的值。

我已经在 IE、FF 和 Chrome 中测试了这种行为。在我的测试机器上，它在所有 3 上都可以正常工作。在我的生产机器上，只有 IE 可以正常工作。

【问题讨论】：

看看你的点击功能中的api.jquery.com/event.stopPropagation是否没有清除问题。
@asawyer alert 不会弹出，所以我假设 PostBack 发生在点击事件之前。这意味着stopPropagation 也不会运行（只是测试过它并没有帮助）
好点。这里还早。试试这个 - 将你的匿名点击函数更改为一个普通的命名函数，并在 html 中设置一个 onclick='return xxx'，看看它现在是否不能进入该函数。
@asawyer 当我将 javascript 放入 onClientClick 时它运行（onClick 尝试执行 PostBack，因为这是一个 asp 按钮）。我仍然想知道为什么我不能使用我所拥有的语法，因为如果可能的话，我宁愿将我的 javascript 保留在我的 asp 文件之外。
@Becuzz 如果托管在我的测试环境中，它在 IE、FF 和 Chrome 中运行良好，但我注意到 Chrome 的生产副本中存在问题。我刚刚测试了IE和FF，FF也有同样的问题，但是IE运行正常。

标签： jquery asp.net iis-6 asp.net-2.0 iis-5

【解决方案1】：

试试这个：

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

   .
   .
});

默认情况下按钮呈现一个提交按钮。您还可以设置 UseSubmitBehavior="false" 以使其成为 <input type="button" /> 元素，看看这是否会给您带来更好的结果。

【讨论】：

谢谢，但是到目前为止我已经说过两次，PostBack 在点击事件之前运行，所以这根本不会做任何事情。

【解决方案2】：

查看生成的 html。如果 ASP.NET 注入了它自己的 onclick="__DoPostBack..." 代码，您需要使用

将其删除

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

【讨论】：

一开始我认为这是个好主意，但是当我尝试实现它时，仍然会出现 PostBack。我不确定它是否相关，但是如果我在更改之前查看页面的源代码，我的按钮上没有 onClick 属性

【解决方案3】：

也许是这个？

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

【讨论】：

我得到了相同的行为 - 点击之前发生回发。

【解决方案4】：

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

});

这应该就是你所需要的

【讨论】：

【解决方案5】：

实际上 asp.net 在每个按钮上都放置了一个 onclick 事件，所以首先你必须像这样从你的代码中删除它：-

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

【讨论】：

【解决方案6】：

此代码正在运行。我测试过，请检查。使 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>

文件隐藏代码

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

【讨论】：