必须单击 ASP.net 按钮两次才能调用 jquery 函数答案

【问题标题】：ASP.net button has to be clicked twice for a jquery function call必须单击 ASP.net 按钮两次才能调用 jquery 函数
【发布时间】：2013-04-17 20:31:25
【问题描述】：

我需要什么：我有我需要更改和更新的工作代码。我有一个模态控件（就像一个弹出框），它在单击按钮时被调用。现在，我需要在 vb.net 代码中计算一些东西，然后决定调用它。（弹出框出现）

问题：它被调用了，但我必须在我的按钮上单击两次。只有当 CssClass 设置如下时才会调用：CssClass="osx ImageButton100"

背景：我正在使用的模态控件：http://www.ericmmartin.com/projects/simplemodal-demos/

所做的更改：

Before:

 <asp:Button ID="btnCheckOut" runat="server" Text="Preview Order" CssClass="osx ImageButton100"        />

现在：

 <asp:Button ID="btnCheckOut" runat="server" Text="Preview Order"   />
  btnCheckOut.CssClass = "osx ImageButton100"

完整代码：

http://forums.asp.net/post/5367139.aspx

【问题讨论】：

你能从 JavaScript 调用模态框吗？那会容易得多。
另外，我知道这是你使用的，但我会推荐 twitter 引导模式。它易于集成。

标签： jquery asp.net postback

【解决方案1】：

在您的代码隐藏中，Utils.MessageBox 是什么？（从您的按钮单击事件处理程序调用）。

无论如何，在我看来，您的代码的行为符合设计。步骤：

用户点击按钮。
发生回发，服务器端代码在按钮上设置属性，将其配置为显示弹出窗口。
页面响应发送回客户端。
用户再次单击按钮，现在它显示一个模式（因为它的类已配置）。

您通过发出回发（按钮单击正在调用服务器端事件处理程序）来中断客户端代码流。关于如何进行流程有几种选择：

继续使用回发，但让服务器端代码注册一个“启动”脚本以在 javascript 页面加载事件上执行。不过，这可能有点笨拙，尤其是当用户刷新页面时。
让您的按钮单击执行回调而不是回发。有几种不同的方法可以解决这个问题，不过我建议不要使用 WebForms UpdatePanel 方法。
将所有这些逻辑移动到客户端。

鉴于您的按钮单击事件处理程序非常简单，我推荐第三个选项。所以忘记btnCheckOut 的服务器端事件处理程序吧。从已经设置为osx ImageButton100 的按钮类开始。然后将您的 javascript 点击处理程序更改为更像：

$("input.osx, a.osx").click(function (e) {
    e.preventDefault();     

    var lineCount = $("#txtApprovalNotes").val()
                        .match(/[^\n]*\n[^\n]*/gi).length;

    if (lineCount > 20) {
        alert("Approval notes has a limit of 20 lines.";
    } else {
        $("#osx-modal-content").modal({
            overlayId: 'osx-overlay',
            containerId: 'osx-container',
            closeHTML: '<div class="close">
   <a href="#" class="simplemodal-close" style="font-size:150%;">x</a></div>',
            minHeight:80,
            opacity:65, 
            position:['0',],
            overlayClose:true,
            onOpen:OSX.open,
            onClose:OSX.close,
            appendTo:'form'
        });
    }
});

这不仅会使逻辑流程的维护变得更简单，而且会减少回发，并使浏览器中的响应更加灵敏。

【讨论】：