使用jQuery实现单按钮点击触发多按钮点击及服务端事件问题

代码失效的核心原因有三个：

• 你用的<asp:Button>渲染后是type="submit"的表单提交按钮，浏览器同一时间只能处理一个表单提交动作，点击btnOne触发的第一个提交会直接中断页面上后续所有JS执行，根本轮不到后面btnTwo的点击事件触发提交。
• 你引入的是jQuery slim版本，这个版本裁剪了事件触发、AJAX相关的部分逻辑，对原生submit事件的触发兼容本身就存在问题。
• ASP.NET WebForm的服务端事件回发依赖自带的__doPostBack函数传递触发控件的唯一ID，靠jQuery模拟click只能触发你自己绑定的前端方法，无法正确携带btnTwo的回发参数到服务端，自然触发不了btnTwo的服务端事件。

不要靠客户端模拟多次按钮点击触发多个服务端事件，WebForm单次请求本来就只能对应一个回发触发源，最稳定的方案是在btnOne的服务端点击事件里直接调用btnTwo的事件方法，客户端只需要正常执行所需前端逻辑即可。

前端代码调整 #

把jQuery替换为完整版（不要用slim版本），移除btnOne点击回调里对其他提交按钮的模拟点击逻辑，避免提前提交打断执行：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PostBackApp.apppages.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <!-- 替换为完整版jQuery，移除slim版本 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {
            $('#btnOne').click(function () {
                // 按顺序执行所有需要的客户端逻辑
                one();
                two();
                three();
                // 客户端逻辑执行完成后，按钮默认提交动作自动触发即可
            });
            $('#btnTwo').click(function () {
                two();
            });
            $('#btnThree').click(function () {
                three();
            });
        });
        function one() {
            alert('Client Side One was called');
        }
        function two() {
            alert('Client Side Two was called');
        }
        function three() {
            alert('Client Side Three was called');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnOne" Text="1" runat="server" OnClick="btnOne_Click"></asp:Button>
            <asp:Button ID="btnTwo" Text="2" runat="server" OnClick="btnTwo_Click"></asp:Button>
            <input type="button" name="btnThree" id="btnThree" value="3" />
        </div>
    </form>
</body>
</html>

后端代码调整 #

在btnOne的服务端点击事件中直接调用btnTwo的事件处理方法，单次回发就能执行完两个服务端逻辑：

using System;
using System.Web.UI;

namespace PostBackApp.apppages
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            bool isPostbck = this.IsPostBack;
        }

        protected void btnOne_Click(object sender, EventArgs e)
        {
            // 执行btnOne自身的服务端逻辑
            ClientScript.RegisterStartupScript(this.GetType(), "Key1", "alert('Server Side One was called');", true);
            // 直接调用btnTwo的服务端事件方法，不需要客户端模拟点击
            btnTwo_Click(sender, e);
        }

        protected void btnTwo_Click(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(this.GetType(), "Key2", "alert('Server Side Two was called');", true);
        }
    }
}

不要尝试在客户端模拟多次提交按钮点击，浏览器会直接取消前面未完成的请求，最终只有最后一个触发的提交能到达服务端，前面的事件逻辑会全部丢失。如果确实要发起多个独立请求，需要手动写AJAX调用对应接口，但WebForm的事件模型本身不适合这种实现方式，服务端直接调用对应方法是兼容性最好、性能最高的方案。

btnThree是普通HTML按钮，没有绑定服务端事件，不存在提交冲突问题，在btnOne的客户端回调里直接调用three()或者$('#btnThree').click()就能正常执行它的前端逻辑。

内容的提问来源于stack exchange，提问作者Learner of Coding