为啥我的 PostBack 在我的 jQuery 点击事件之前发生?

Posted

技术标签:

【中文标题】为啥我的 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运行正常。 【参考方案1】:

试试这个:

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

   .
   .
);

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

【讨论】:

谢谢,但是到目前为止我已经说过两次,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();
                
            

【讨论】:

以上是关于为啥我的 PostBack 在我的 jQuery 点击事件之前发生?的主要内容,如果未能解决你的问题,请参考以下文章

为啥这个 jQuery 在我的 Sharepoint 页面上不起作用?

为啥 Jquery 在我的 html 中添加内联样式?

为啥 jQuery 不能在我的 Mac 上的 xampp 上运行?

为啥 jQuery 在我的 rails 5 应用程序中不起作用?

为啥 jquery.validation.js 在我的项目中不起作用?

为啥我的 jQuery .ajax() 路由的 .done() 方法没有在我的 NodeJS、Express 和 Mongoose 项目中触发?