Функция работает только один раз

Question

Почему мой код работает только один раз на одном элементе?

Вот мои кнопки:

<button class="btn-warning line-focus" id="1">Focus</button> 
<button class="btn-default line-normal" id="2">Normal</button> 
<button class="btn-warning line-focus" id="3">Focus</button> 
<button class="btn-warning line-focus" id="4">Focus</button> 
<button class="btn-warning line-focus" id="5">Focus</button> 

вот мой JQuery скрипт:

$(".line-focus").live('click', function() { 
    //unfocus line 
    var lineid = this.id; 
     $(this).removeClass("btn-warning"); 
     $(this).removeClass("line-focus"); 
     $(this).addClass("line-normal"); 
     $(this).addClass("btn-default"); 
     $(this).text('Normal'); 
}); 


$(".line-normal").live('click', function() { 
    //focus line 
    var lineid = this.id; 
     $(this).removeClass("btn-default"); 
     $(this).removeClass("line-normal"); 
     $(this).addClass("line-focus"); 
     $(this).addClass("btn-warning"); 
     $(this).text('Focus'); 
}); 

Что я не так? Должна быть возможность сфокусировать/разфокусировать одну и ту же кнопку в миллион раз

Answer 1

Поскольку вы удаляете класс элемента с щелчком, вы сможете щелкнуть еще раз, и вы не получите то, что ожидаете.

Используйте event delegation метод:

$(document).on('click',".line-focus", function() { 
    //unfocus line 
    var lineid = this.id; 
     $(this).removeClass("btn-warning"); 
     $(this).removeClass("line-focus"); 
     $(this).addClass("line-normal"); 
     $(this).addClass("btn-default"); 
     $(this).text('Normal'); 
}); 


$(document).on('click',".line-normal", function() { 
    //focus line 
    var lineid = this.id; 
     $(this).removeClass("btn-default"); 
     $(this).removeClass("line-normal"); 
     $(this).addClass("line-focus"); 
     $(this).addClass("btn-warning"); 
     $(this).text('Focus'); 
}); 

Кроме того, я хотел бы рекомендовать вам использовать on вместо метода живой(), так как вы используете 1,10 версию JQuery.