Question

我刚在asp.net中发现了一个有趣的行为。

我有一个表单，它有一个在最初加载时隐藏的字段集和一个提交按钮。

我期望做的是当用户点击提交按钮时，会出现字段集。问题是，当我尝试单击提交按钮时，它将显示fieldset元素，但会立即消失。

如果你能指出我在我的代码中哪里做错了什么，我是否可以指出正确的方向？请参阅下面的代码。

万分感谢！

干杯，安

<%@ Page Language="C#" AutoEventWireup="true" Inherits="JavascriptTest._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Javascript</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <script type="text/C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var btnSubmit = '#<%= btnSubmit.ClientID %>';
            $('#result').hide();
            $(btnSubmit).click(function () {
                $('#result').show();
                return true;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset id="result">
            <legend>Search Result</legend>
            <p>Cras risus. Parturient lectus! Ac quis. Enim arcu adipiscing nunc? Porta magna ultrices elit amet, turpis vel nunc, massa pulvinar sit, pulvinar amet elementum tristique diam parturient, eu in dolor, non pulvinar nisi, penatibus? Velit tincidunt? Pulvinar nec urna ac, pulvinar purus integer phasellus, ridiculus non dictumst penatibus dolor rhoncus elementum pellentesque? Adipiscing et, dapibus, amet ac porta! Magna tristique, sed porta elit mid. Et ultricies et elit mattis. Arcu! Elementum ac? Nisi turpis, vel in massa pellentesque porta lectus, egestas aenean scelerisque risus? Placerat purus cum et. Egestas sociis, adipiscing porttitor scelerisque integer? Auctor a arcu sit aliquam amet sed odio, velit turpis, risus, porttitor mid diam, ac arcu lectus auctor, facilisis tincidunt! Et, proin, turpis nunc velit? Elementum.</p>
        </fieldset>

        <asp:Button ID="btnSubmit" runat="server"  Text="Submit" />
    </div>
    </form>
</body>
</html>

Answer 1

此处的默认按钮行为正在进行中，导致<form>提交并刷新您的页面（再次隐藏<fieldset>）。您需要使用event.preventDefault()或return false阻止此默认行为，如下所示：

$(document).ready(function () {
    var btnSubmit = '#<%= btnSubmit.ClientID %>';
    $('#result').hide();
    $(btnSubmit).click(function (e) {
        $('#result').show();
        e.preventDefault();
    });
});

event.preventDefault()只会阻止提交，因为return false将导致事件死亡......所以我真的认为return false在这里过度杀伤。做你正在尝试做的事情真的更好，不能超过以后可能导致潜在的不必要问题的事情（例如，如果你杀死了这个事件，.live() / .delegate()处理程序将不起作用，等）。

Answer 2

你会想要“回归假”;而不是true以防止按钮导致实际的回发。我猜你想要的只是一个客户端动作，所以你返回false。

Answer 3

在按钮功能中，您需要返回false，否则表单将被提交

        $(btnSubmit).click(function () {
            $('#result').show();
            return false; //changed this to return false
        });

Answer 4

当您单击按钮并再次执行$（'＃results）.hide（）时，您正在回帖...您需要在Click处理程序中执行event.preventDefault（），以防止回帖。

asp.net回发和javascript / jquery

4 个答案: