1

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 中），但这不重要，不是吗？

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

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

4

5 回答 5

1

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

$("#<%= btnCancel.ClientID %>").click(function(e){
    //open the dialog
});
于 2012-04-09T20:32:04.107 回答
1

使用 $("[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');
        });
    });
于 2012-04-09T20:38:55.597 回答
0

您需要将其分解 - 听起来 JS 中有另一个错误，您看不到，因为页面正在重新发布。尝试点击警报：

$('#btnCancel').click(function(e) {
alert('boo');
});

如果这不起作用，您需要制作最简单的脚本使其工作，然后添加到它。

于 2012-04-09T20:33:50.533 回答
0

我想到了！事实证明，<script>标签（似乎也不是大多数其他标签）在 HTML4 或 HTML5 中不能自闭合。我是这样写的：

<script type="text/javascript" src="whatever" />

当根据标准时，它们必须这样写：

<script type="text/javascript" src="whatever"></script>

这使我的第一个<script>包含工作（jquery-1.7.2.min.js），但随后的失败。很奇怪吧？

以下是一些支持信息的链接：

于 2012-06-01T17:18:29.417 回答
0 
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;

将其连接到模态确认对话框上的“是”按钮。您需要根据需要更改 ID。

于 2013-02-16T16:20:42.683 回答