2013-12-01 3 views
0

Так что в большинстве случаев мой jquery отлично работает, за исключением перехода моего сотового бара, когда он скрыт и показан. Кроме того, моя самая большая проблема заключается в том, что, как только моя socbar рухнет, ссылка на расширение станет мертвой, пока страница не будет обновлена. Что случилось с моим кодом?jQuery link умирает после нажатия

Мой 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/

ответ

2

Поскольку вы решили добавить и удалить элемент .social_button, вам необходимо использовать делегирование событий для обработки события click.

Изменение:

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

к:

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

отлично работает! Могу ли я попросить о помощи с моим странным переходом? Когда рушится и расширяется, планка имеет размеры. Как я могу расширить его в полном размере? – user3053311

Смежные вопросы