Question

我试图用jquery切换方法显示和隐藏div元素。我有一个链接按钮onclick调用页面上的JavaScript。单击链接按钮时，即使我声明javascript函数返回false，页面也会进行回发。有人知道如何解决这个问题？

function toggleDiv(){
        $('#app').toggle("fast");
    }
</script>

<form runat="Server">

    <asp:LinkButton ID="LinkButton1" runat="Server" OnClientClick="toggleDiv(); return false;" Text="Show/Hide"></asp:LinkButton>

    <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
          <p>jQuery Example </p> 
    </div>

</form>

Answer 1

将你的js重写为以下内容，它应该可以正常工作

<script type="text/javascript">
    $('#<%= LinkButton1.ClientID %>').click(function(e) {
        $('#app').toggle("fast");
        e.preventDefault();
    });
</script>

<form runat="Server">
    <asp:LinkButton ID="LinkButton1" runat="Server" Text="Show/Hide"></asp:LinkButton>
    <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
        <p>jQuery Example </p> 
    </div>
</form>

Answer 2

我会这样做：

$('#LinkButton1').click(function(e) {
  $('#app').toggle('fast');
  e.preventDefault();
});

然后只删除OnClientClick事件。应该更容易一点，为你工作。

Answer 3

您是否在开始时添加了准备好的文档代码？自从你使用Asp服务器控件，控件由.net命名，也许linkbutton1没有被重新作为linkbutton1 id。我会写这样的代码：

$(function(){
       $('a[id$=LinkButton1]').click(function() { 
        $('#app').toggle("fast"); 
        return false; 
    }); 

});

Answer 4

链接可能导致页面回发，这会将DIV重置为可见。解决此问题的最简单方法是从函数中返回false。

<script type="text/javascript">
$('#<%= LinkButton1.ClientID %>').click(function(e) {
    $('#app').toggle("fast");
    return false;
});
</script>

Answer 5

如果查看html代码，它看起来像这样。注意“javascript：__ doPostBack

<a id="btn" href="javascript:__doPostBack('btn','')">Show/Hide</a>

 <div id="app" style="background-color:Fuchsia; width:900px; height:300px;">
 <p>jQuery Example </p>
 </div>

Answer 6

我认为问题在于您将Javascript语句放在与包含jquery的标记相同的脚本标记中。

我将您的代码更改为此，它解决了我的问题：

<script src="scripts/jquery-1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('#<%= LinkButton1.ClientID %>').click(function(e) {
                $('#app').toggle("fast");
                return false;
            });
        });
    </script>

为什么我的jquery不执行？

6 个答案: