Question

所以在大多数情况下，我的jquery工作正常，但隐藏和显示我的socbar的转换除外。除此之外，我最大的问题是，一旦我的社交栏崩溃，扩展链接就会消失，直到页面刷新为止。我的代码出了什么问题？

我的jscript：

$(".socbar").hide().before("<div class='social_button'></div>");
$(".social_button").click(function(){
var $link = $(this);
$link.next().show("slow");
$link.remove();
return false;
});
$(".arrow").click(function(){
$(".socbar").hide().before("<div class='social_button'></div>");
return false;
});

我的Html：

<!DOCTYPE HTML>
 <html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Test Page</title>

 <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
 </head>



 <body>

<div class="container clearfix">

    <div class="navbar_container grid_5">
        <div id="navbar">
            <div class="nav_container grid_2 omega">
                <div class="socbar">
                    <ul class="soc">
                        <li><a href="#" id="Facebook" 
 title="Facebook"></a></li>
                        <li><a href="#" id="Linkedin" 
 title="Linkedin"></a></li>
                        <li><a href="#" id="Youtube"  
 title="Youtube"></a></li>
                    </ul>
                    <span class="arrow" title="Collapse">     
 </span>
                </div>

                <ul class="nav">
                    <li><a href="#" id="Portfolio"></a></li>
                    <li><a href="#" id="Services"></a></li>
                    <li><a href="#" id="About"></a></li>
                    <li><a href="#" id="Home"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>





<script type="text/javascript" src="jscript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/nav.js"></script>

 </body>

 </html>

演示：

http://testpage.aws.af.cm/

Answer 1

由于您已选择添加和删除.social_button元素，因此您需要使用事件委派来处理click事件。

变化：

$(".social_button").click(function(){

为：

$(document).on('click','.social_button',function () {

单击后jquery链接死亡

1 个答案: