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

发布于 2024-12-28 21:46:50 字数 2059 浏览 4 评论 0原文

我对 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：

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

编辑

根据下面评论中的建议，在 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 可以正常工作。

原文

I'm fairly new to jQuery, but I have some links on my page which should toggle sections of the form visible when clicked, or if javascript is disabled it does a full postback to toggle those sections

It works fine in my test environment, with the PostBack occurring after the jQuery script, but once I deploy it the PostBack occurs before the jQuery click event. It's deployed on a Windows 2003 server running IIS 6.0, while my test environment is Windows XP / IIS 5.1 / VS2010

Here's the code I'm using. The script runs in production if I put it in .ready() instead of .click() but in .click() I don't even get the alert, so I am assuming the issue is with the PostBack occuring before the jQuery script has a chance to execute.

jQuery:

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

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

Edit

Per a suggestion in the comments below, running the jQuery function in onClientClick makes the page act as it should, however I still want to know why the PostBack occurs after the jQuery event in my test environment, but before the jQuery event in production.

I have noticed other differences between the two as well. For example, I also have a button that toggles on/off a search div which works fine in testing but not in production. It uses $('.toggleSearchButton').next() to get the div under the search button and toggles it's class name. In production, this object returns [object Object], however calling .attr('class') returns undefined (so does .attr('id'), .attr('tag') and .nodeName). In my test environment, it returns the correct values for my search div.

I've tested this behavior in IE, FF, and Chrome. On my test machine, it works fine on all 3. On my production machine, only IE works the way it should.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不回头走下去 2025-01-04 21:46:50

试试这个：

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

   .
   .
});

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

Try this:

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

   .
   .
});

By default button renders a submit button. You could also set UseSubmitBehavior="false" to make it an <input type="button" /> element, and see if that gives you better results.

回复收藏 0 原文

任谁 2025-01-04 21:46:50

看看生成的 html。如果 ASP.NET 注入了它自己的 onclick="__DoPostBack..." 代码，您需要使用以下命令将其删除

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

Have a look at the resulting html. If ASP.NET have injected it's own onclick="__DoPostBack..." code you need to remove it using

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

回复收藏 0 原文

神妖 2025-01-04 21:46:50

也许是这个？

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

Perhaps this?

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

回复收藏 0 原文

苏辞 2025-01-04 21:46:50

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

});

这应该就是你所需要的

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

});

That should be all you need

回复收藏 0 原文

却一份温柔 2025-01-04 21:46:50

实际上，asp.net 在每个按钮上都放置了一个 onclick 事件，因此首先您必须将其从代码中删除，如下所示：-

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

Actually asp.net puts a onclick event on every button, so first you have to remove that from your code like this:-

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

回复收藏 0 原文

因为看清所以看轻 2025-01-04 21:46:50

这段代码正在运行。我测试了它，请检查。make 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();
                }
            }

this code is working. i tested it please check.make 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>

Code behind file

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

回复收藏 0 原文

~没有更多了~