javascript - 将 jquery 模态弹出脚本附加到按钮事件

Question

我正在使用名为 bPopup ( http://dinbror.dk/bpopup/ ) 的简单开箱即用 jQuery 脚本在 .net 网络表单上启动模态弹出窗口。我是 jQuery 的新手，我想要的行为是在按钮单击的代码隐藏事件完成处理后触发模态弹出窗口。在模态弹出元素中，我有两个面板，一个带有成功消息，一个带有失败消息。我将脚本绑定(bind)到按钮，问题是，它只是触发 jquery 而根本不再触发代码隐藏事件。

这里是jQuery脚本(相对复制粘贴自作者的demo):

 <script>
     // Semicolon (;) to ensure closing of earlier scripting
     // Encapsulation
     // $ is assigned to jQuery
     ; (function ($) {

         // DOM Ready
         $(function () {

             // Binding a click event
             // From jQuery v.1.7.0 use .on() instead of .bind()
             $('#my-button').bind('click', function (e) {

                 // Prevents the default action to be triggered. 
                 e.preventDefault();

                 // Triggering bPopup when click event is fired
                 $('#element_to_pop_up').bPopup();

             });

         });

     })(jQuery);
    </script>

这是模态弹出元素:

<!-- Element to pop up -->
            <div id="element_to_pop_up">
            <asp:Panel ID="pnlSubmitSuccess" runat="server" Visible="true">
            <div style="font-size:25px; font-weight:bold; font-style: italic; color:#4d90fe;">Success!</div><br /><br />
            <div style="font-size:20px;">The submitted data was successfully saved.</div>
            </asp:Panel>
            <asp:Panel ID="pnlSubmitFail" runat="server" Visible="false">
            <div style="font-size:25px; font-weight:bold; font-style: italic; color:#4d90fe;">Whoops!</div>
            <br /><br /><div style="font-size:20px;">There seems to be a few issues with the data you submitted. Please check all required fields for accuracy.</div>
            </asp:Panel>
            </div>

这是它所附的按钮:

 <asp:Button ID="btnProcess" runat="server" Text="Process" CssClass="button"
        onclick="btnProcess_Click" />

onclick 事件永远不会发生，无论发生什么，jquery 都会弹出模式。我该如何解决这个问题？

Answer 1

e.preventDefault(); 停止回发，因此后面的代码不会触发。这样做的方法是在点击按钮后的代码中设置成功文本，然后在 jquery 中检查成功消息。

点击按钮后的代码

if(success){
    success_message_label.text = "The submitted data was successfully saved.";
}
else{
    success_message_label.text = "";
}

然后在 jquery 中准备好文档:

if($('#success_message_label').text() == "The submitted data was successfully saved.") {
    $('#element_to_pop_up').bPopup();
}

还要确保您的 success_message_label 中的 clientIdMode="Static"。