JavaScript模式弹出赢得'不起作用

Modal pop up in JavaScript won't work

本文关键字:不起作用 模式 JavaScript      更新时间:2023-09-26

我正在尝试使用javascript和ASP.NET web表单制作简单的弹出窗口。

我有以下代码:

<%@ Register Src="~/Controls/BankInformation.ascx" TagName="BankInformation" TagPrefix="ABS" %>
    <script type="text/javascript">
        $(document).ready(function () {
            var bankInformation = $('#<%=bankInformation.ClientID%>');
            var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');
            function OpenDirectDebitDialog(dialogID) {
                $("#" + dialogID).modal();
            }
            function ValidateAndCloseDirectDebitDialog(validationGroup, dialogID) {
                var pageValid = Page_ClientValidate(validationGroup);
                if (pageValid)
                    $("#" + dialogID).modal("hide");
            }
            $(sameAsMerchantBankCheckbox).change(function () {
                OpenDirectDebitDialog(bankInformation);
            });
        });
    </script>
    <asp:CheckBox runat="server" ID="chkDirectDebit" />
    <asp:Label runat="server" AssociatedControlID="chkSameAsMerchantBank" ID="txtDirectDebit" meta:resourcekey="lblDirectDebit"></asp:Label>
    <asp:CheckBox runat="server" ID="chkSameAsMerchantBank" AutoPostBack="True" Checked="True" />
    <asp:Label runat="server" AssociatedControlID="txtSameAsMerchantBank" ID="txtSameAsMerchantBank" meta:resourcekey="lblSameAsMerchantBank"></asp:Label>
    <div id="bankInfoDialog" runat="server" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
        <ABS:BankInformation runat="server" ID="bankInformation" />
    </div>

取消选择chkSameAsMerchantBank复选框时,应激发事件并调用OpenDirectDebitDialog函数。但所发生的只是页面刷新(我想是自动回发)。浏览器控制台中没有错误或任何内容。有人看到我做错了什么吗?我甚至可以在这样的模态上调用隐藏形式吗?

您必须执行

var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');

在代码中,然后访问复选框Id

您不必在函数中重新创建jQuery id选择器,如下所示:

 $("#" + dialogID).modal();

因为传递的参数已经是jQuery对象。所以只需从中删除"#"+即可。


为什么?见下文:

由于这个var是一个jQuery对象:

var bankInformation = $('#<%=bankInformation.ClientID%>'); // id selector jq object.

你不必在函数中再次将其作为id选择器:

var sameAsMerchantBankCheckbox = $('#<%=chkSameAsMerchantBank.ClientID%>');// id selector.

在函数更改事件中传递:

$(sameAsMerchantBankCheckbox).change(function () { // <----this will do.
    OpenDirectDebitDialog(bankInformation); // <----passed the jQuery selector object here.
});    

所以你只需要这样做:

function OpenDirectDebitDialog(dialogID) {
   dialogID.modal(); // it would suffice.
   // or $(dialogID).modal(); 
}