Question

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

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

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

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以它应该的方式工作。

Answer 1

试试这个：

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

   .
   .
});

默认情况下，按钮会显示一个提交按钮。您还可以设置UseSubmitBehavior =“false”使其成为<input type="button" />元素，并查看是否可以为您提供更好的结果。

Answer 2

看一下生成的html。如果ASP.NET已经注入了自己的onclick="__DoPostBack..."代码，则需要使用

将其删除

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

Answer 3

也许这个？

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

Answer 4

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

});

这应该就是你需要的全部

Answer 5

实际上asp.net会在每个按钮上放置一个onclick事件，所以首先你必须从代码中删除它，如下所示： -

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

Answer 6

此代码正常运行。我测试了一下，请检查。 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();
                }
            }

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

6 个答案: