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 confirm（）对话框，但我希望能够自定义提示/样式。

我能想到的唯一其他信息是这个代码在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');
        });
    });

Answer 3

你需要将其分解 - 听起来JS中的某个地方出现了另一个错误，因为该页面正在重新发布。在点击上尝试提醒：

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

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

Answer 4

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

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

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

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

这允许我的第一个<script>包含工作（jquery-1.7.2.min.js），但是后续失败。很奇怪，是吗？

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

Answer 5

<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;

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

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

5 个答案: