Question

我在页面上有一个ASP:Button。它像HTML一样呈现：

<input type="submit" name="myButton" value="Do something" 
    onclick="javascript:WebForm_DoPostBackWithOptions(
        new WebForm_PostBackOptions('myButton', '', true, '', '', false, false))"
    id="myButton" />

现在我试图通过jQuery事件处理程序阻止此按钮的默认行为（提交表单）：

$('#myButton').click(function () { 
    // do some client-side stuff

    if (someCondition) {
        // don't postback!
        return false;
    }
});

这里的问题是，ASP粘在输入上的内联点击处理程序似乎每次都在jQuery事件处理程序之前执行。

这里最简单的解决方案是使用普通input type="button"而不是ASP:Button，遗憾的是这不是可能的，因为ASP:Button做了很多其他这种情况下需要的东西。

阻止表单提交的最佳方法是什么？我曾经想过使用字符串操作来在元素的onclick属性上添加我的处理程序，但这看起来很脏。我也想避免使用OnClientClick，因为这需要我的处理函数公开公开。还有更好的方法吗？

Answer 1

您是否尝试将OnClientClick="return false;"属性添加到您的aspx按钮控件？

不用担心看看这篇文章它提供了一个javascript事件卸载程序脚本：Is it possible to remove all event handlers of a given element in javascript?

我认为您对上一个方法感兴趣DomLib.prototype.removeEventsByTypeEx

Answer 2

我认为在javascript事件上调用“preventDefault”就是你要找的东西。它将阻止发布回服务器

$('#myButton').click(function (event) { 
    //Call prevent default on the event to prevent submitting the form
    event.preventDefault();
    // do some client-side stuff

    if (someCondition) {
        // don't postback!
        return false;
    }
});

Answer 3

我刚刚找到了一种方式

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        var ploopButton = null;
        $("#ploop").click(function (e) {
            ploopButton = this;
        });
        $("#form1").submit(function (e) {
            if (ploopButton !== null) {
                ploopButton = null;
                return confirm('are u sure?');
            }
            return true;
        });
    });
</script>
<form id="form1" runat="server">
    <asp:Button ID="ploop" Text="ploop" runat="server" OnClick="ploop_Click" />
</form>

基本上你会使用一个全局标志来指示单击了哪个按钮，并且你会在标志打开时确认表单提交

如何防止ASP：Button从jQuery单击处理程序回发

3 个答案: