JQUERY "на" заявление не работает

Question

У меня есть простая кнопка, которая при нажатии меняет свой класс. У меня есть второй скрипт, который пытается обнаружить, что этот класс снова нажал.

Они должны быть в состоянии быть включены и выключены.

//// Кнопка архива нажата РАБОТАЕТ //// Кнопка архива ООН нажата НЕ РАБОТАЕТ

JQuery 1,9

//// Archive button clicked
$('a.archive_butt').on("click", function() {

    //// Put the li in as an object
    var li = $(this).parent('li');
    var entry_id = $(li).attr('rel');

    //// Add class to the li            
    $(li).addClass('status_archived');

    //// Swap the Archive button for unarchive
    $(this).addClass('unarchive_butt');
    $(this).removeClass('archive_butt');
    $(this).empty();
    $(this).text('Un-Archive');

    return false;
});



//// Un Archive button clicked
$('a.unarchive_butt').on("click", function() {
    alert('Fire');  
    return false;
});

Answer 1

Событие click связывается при вызове .on но нет элементов с классом unarchive_butt существует, когда вы называете это, так что это никогда не связано.

То, что вы действительно хотите, это старый JQuery .live() функциональность, которая устарела в пользу кода ниже:

$('body').on('click', 'a.archive_butt', function() {
    //do stuff
});

$('body').on('click', 'a.unarchive_butt', function() {
    //do stuff
});

Answer 2

Менять

$('a.unarchive_butt').on("click", function() {

в

$('a.unarchive_butt').live("click", function() {

Answer 3

Лично я бы сделал:

    //// Archive button clicked
$('a.button').on("click", function() {        
    if ($(this).hasClass("archive_butt")){
       $(this).text('Un-Archive');
       //and all other stuff you are doing
    } 
    else{
       $(this).text('Archive');
       //and all the other stuff you are doing...
    }    
    $(this).toggleClass("unarchive_butt").toggleClass("archive_butt");
});

http://jsfiddle.net/7n5tz/

Answer 4

.live() Метод устарел с 1.7 и больше не должен использоваться.

JQuery.on()

Начиная с jQuery 1.7, метод .on() предоставляет все функциональные возможности, необходимые для подключения обработчиков событий.
...
.on( events [, selector ] [, data ], handler(eventObject) )
...
Если selector опущен или равен нулю, обработчик события называется прямым или напрямую связанным.
...
Когда selector предоставляется, обработчик события называется делегированным.
...
Преимуществоделегированных событий заключается в том, что они могут обрабатывать события от элементов-потомков, которые добавляются в документ позднее.

Поэтому попробуйте заменить:

$('a.unarchive_butt').on("click", function() {
    ...
});

С

$().on("click", "a.unarchive_butt", function() {
    ...
});

Что превращает ваше напрямую связанное событие в делегированное событие, способное обрабатывать изменения класса и объекты, добавленные в dom позже.