Question

我在这里找到了一个JQuery Alert插件，http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/ 所以我做了一个示例页面来测试它，但它似乎不适用于Runat =“server”按钮。第二个按钮就是我试图阻止按钮发回的东西，似乎这样做但是在确认后，它不会去任何地方。

我将不胜感激。

<script src="js/jquery.alerts.js" type="text/javascript"></script>
<link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
    function confirmThis() {
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
            jAlert('Confirmed: ' + r, 'Confirmation Results');
            return r;
        });

        return false;
    }
    $(document).ready(function () {
        $("#btnNext").click(function () {
            jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
                jAlert('Confirmed: ' + r, 'Confirmation Results');
                return r;
            });
        });
    });

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
     <asp:Button ID="btnNext" runat="server" Text="Confirm 1"/>
     <asp:Button ID="Button1" runat="server" Text="Confirm 2" OnClientClick="return    confirmThis();"/>
</div>
</form>
</body>
</html>

Answer 1

虽然你应该使用btnNext.ClientID，但这不是你问题的原因。问题是您正在使用的库使用回调来实现确认弹出窗口，这意味着您附加到click事件的函数不会等待在退出之前单击确认对话框。由于未从该函数返回false，因此不会取消按钮单击并发生回发。

有关详细信息，请参阅此处接受的答案： Can you wait for javascript callback?

解决此问题的一种方法是始终返回false，然后在确认回调中单击按钮。请记住，在手动调用unbind之前，您必须click事件处理程序。以下代码对我有用：

$(document).ready(function () {
    $("#<%= btnNext.ClientID %>").bind('click', function () {
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
            if (r == true) {

                //Unbind client side click event and submit btnNext
                $("#<%= btnNext.ClientID %>").unbind('click');
                $("#<%= btnNext.ClientID %>").click();
            }
        });

        //Always prevent a postback by returning false
        return false;
    });
});

Answer 2

使用按钮的clientID。像这样：

 $(document).ready(function () {
    $("#<%=btnNext.ClientID%>").click(function (e) {
        e.preventDefault(); // Stops the postback
        jConfirm('Can you confirm this?', 'Confirmation Dialog', function (r) {
            jAlert('Confirmed: ' + r, 'Confirmation Results');
            return r;
        });
    });
});

Answer 3

你也可以给按钮一个css类，如

<asp:Button ID="btnNext" class="showConfirm" runat="server" Text="Confirm 1"/>

＆安培;然后在你的javascript中引用它

     $(document).ready(function () {
    $('.showConfirm').click(function(){
     // Your code goes here
});
});

这样您也可以将脚本移动到外部文件＆amp;不必将其嵌入您的页面。

在ASP.Net上使用JQuery Alert Runat =“server”按钮

3 个答案: