为啥我的 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是否没有清除问题。 @asawyeralert
不会弹出,所以我假设 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" 以使其成为 <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();
【讨论】:
以上是关于为啥我的 PostBack 在我的 jQuery 点击事件之前发生?的主要内容,如果未能解决你的问题,请参考以下文章
为啥这个 jQuery 在我的 Sharepoint 页面上不起作用?
为啥 jQuery 不能在我的 Mac 上的 xampp 上运行?
为啥 jQuery 在我的 rails 5 应用程序中不起作用?
为啥 jquery.validation.js 在我的项目中不起作用?
为啥我的 jQuery .ajax() 路由的 .done() 方法没有在我的 NodeJS、Express 和 Mongoose 项目中触发?