Почему функция перестает работать после замены href?

Question

[Никита]

Скрипт просто разворачивает информацию при нажатии на кнопку. Когда было 2 кнопки, скрипт прекрасно работал, решил упростить скрипт, упрознил 1 кнопку и теперь при клике у нее меняется href, однако после смены href скрипт перестает работать и не сворачивает информацию обратно.

$( document ).ready(function() {
 
var txtZeroID = "#rec70014772";
 
var open = false;
var close = true;
var resize = false;
$('[href = "#long"]').addClass('activebtn');
 
function allUp(){
 
   if (!resize){
    $("[href='#stepsleft2']").parent(".tn-elem").animate({ top: '-=80' }, 1000); 
    $("[href='#stepsleft3']").parent(".tn-elem").animate({ top: '-=160' }, 1000);
    $("[href='#stepsleft4']").parent(".tn-elem").animate({ top: '-=240'}, 1000);
    $("[href='#stepsright6']").parent(".tn-elem").animate({ top: '-=80' }, 1000); 
    $("[href='#stepsright7']").parent(".tn-elem").animate({ top: '-=160'}, 1000); 
    $("[href='#stepsright8']").parent(".tn-elem").animate({ top: '-=240'}, 1000); 
 
    $("[href='#myline']").parent(".tn-elem").animate({
    height : '-=270',   }, 1000, function() {   });
   } else {resize = false;};
 
   $(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier ,  "+txtZeroID+" .t396__filter").animate({ height : '-=260px' }, 1000);
 
 
    $('[href = "#txtleft"]').removeClass("showtxt");
 
    $('[href = "#txtright"]').removeClass("showtxt");
 
    close = true;open = false; 
};   
 
 
function allDown(){
    $("[href='#stepsleft2']").parent(".tn-elem").animate({ top: '+=80' }, 1000); 
    $("[href='#stepsleft3']").parent(".tn-elem").animate({ top: '+=160' }, 1000);
    $("[href='#stepsleft4']").parent(".tn-elem").animate({ top: '+=240' }, 1000);
    $("[href='#stepsright6']").parent(".tn-elem").animate({ top: '+=80' }, 1000);
    $("[href='#stepsright7']").parent(".tn-elem").animate({ top: '+=160' }, 1000);
    $("[href='#stepsright8']").parent(".tn-elem").animate({ top: '+=240' }, 1000); 
 
    $("[href='#myline']").parent(".tn-elem").animate({ height : '+=270' }, 1000);
    
 
   $(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier ,  "+txtZeroID+" .t396__filter").animate({height : '+=260px'}, 1000);
 
 
    $('[href = "#txtleft"]').addClass("showtxt");
 
    $('[href = "#txtright"]').addClass("showtxt");
 
    open = true;close = false;
};   
 
     $('[href = "#long"]').click(function (){
         $("[href='#long']").attr('href', '#short')
 if (close){ allDown()};
 
 
});
 
 $('[href = "#short"]').click(function (){
         $("[href='#short']").attr('href', '#long')
   
 if (open){ allUp()}; 
 
 
 });
 
 
var resizeTimeout;
$(window).resize(function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
          if (!close){ 
   resize = true;
   setTimeout(function() { 
    $("[href = '#short']")[0].click(); 
}, 500); };  }, 500);});
 
});

Немного извратившись над кодом заставил код работать, но только 1 цикл

$('[href = "#long"]').click(function (f){
$("[href='#long']").attr('href', '#short');
 if (close){ allDown();}
      f.stopPropagation();
 
$('[href = "#short"]').click(function (n){
           $("[href='#short']").attr('href', '#long');
     if (open){ allUp();}
     n.stopPropagation();
});
f.preventDefault();

Подскажите, как заставить его работать на каждом нажатии?

Answer 1

[Stalker_RED]

обработчики навешиваются на конкретный html-элемент, а не на атрибут. После смены атрибута обработчик клика никуда сам не перескочит.

Читайте о "делегировании обработки событий" или пересмотрите подход (сейчас все ужасно).

Comments

[Никита]

Большое спасибо, хоть я все еще новичок в jquery, я смог решить свою проблему за 10 минут, прочитав ваш ответ:)