带有 ASP.NET 的 jQuery UI 模式确认对话框未触发 onClick 事件

Question

jQuery 新手在这里。我已经查看了这个网站上的几十个类似问题，以及到目前为止提供的答案，所有答案都几乎相同，我已经尝试了所有这些问题，但没有一个对我有用。

对于我的 .aspx 中的 Javascript 代码，我目前有：

<script type="text/javascript" src="/resources/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/resources/jquery-ui-1.8.20.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resources/ui-lightness/jquery-ui-1.8.20.custom.css" />

<script language="javascript" type="text/javascript">
    $(function() {
        var $myDialog = $("#cancelDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                'Yes, cancel': function() {
                    $(this).dialog('close');
                    return true;
                },
                'No, resume editing': function() {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

        $("[id$=btnCancel]").click(function(e) {
            //e.preventDefault();
            alert('boo');
            //$myDialog.dialog('open');
        });
    });
</script>

“btnCancel”的标记看起来像这样 - 请注意我没有“onClientClick”属性，因为 jQuery 应该为我做这件事，对吧？

<asp:Button ID="btnCancel" CssClass="btnCancel" runat="server" Text="Cancel"
    CausesValidation="false" UseSubmitBehavior="false" />

这是取消对话框的标记：

<div id="cancelDialog" style="display: none;" title="Please confirm cancellation">
    <p>Are you sure you wish to cancel and abandon your changes?</p>
</div>

根据我看到的所有示例（以及此处提供的答案），这应该会给我一个 jQuery UI 弹出窗口，其中包含两个可以正常工作的按钮。当我点击取消按钮时，该页面不再发回（由于我在 Patrick Scott 的建议下所做的更改）。我可以为此使用标准的 Javascript 确认（）对话框，但我希望能够自定义提示/样式。

我能想到的唯一其他信息是此代码位于 ASP.NET 向导控件上（取消按钮位于 StepNavigationTemplate 中），但这不重要，不是吗？

非常感谢任何有关我需要更改以使其正常工作的提示！

（问题和代码已更新以反映我最近所做的更改）

Answer 1

它不起作用的原因是按钮的 ID 在呈现到页面时发生了变化。要在 JavaScript 中访问控件，您需要使用 ClientID 属性：

$("#<%= btnCancel.ClientID %>").click(function(e){
    //open the dialog
});

Answer 2

使用 $("[id$=btnCancel]") 作为点击事件的选择器。

$= 表示在 jquery 选择器中以结尾，而 webforms 添加了一堆会让你的 id 不匹配的东西。

$("[id$=btnCancel]").click(function(e) {

我也不明白为什么您将按钮与对话框的其余部分分开声明...

改为这样做：

$(function() {
        var $myDialog = $("#cancelDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                    'Yes, cancel': function() {
                        $(this).dialog('close');
                        return true;
                    },
                    'No, resume editing': function() {
                        $(this).dialog('close');
                        return false;
                    }
                }
        });

        $("[id$=btnCancel]").click(function(e) {
            e.preventDefault();
            $myDialog.dialog('open');
        });
    });