Ссылка jquery умирает после нажатия

Question

Ссылка jquery умирает после нажатия

0

Таким образом, по большей части мой jquery работает отлично, за исключением перехода моего socbar, когда он скрыт и показан. Кроме того, моя самая большая проблема заключается в том, что, как только моя 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/

user3053311 01 дек. 2013, в 01:20

Источник

Теги:

jquery

hyperlink

click

1 ответ

Ещё вопросы

j08691 · Accepted Answer · 2013-11-30T22-40-00.000Z

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

Изменить:

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

чтобы:

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

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