jQuery: по щелчку, изменить класс и сделать его reclickable

Question

Я пытаюсь заставить это работать, но просто не могу его получить. Так что я пытаюсь сделать здесь, при нажатии ссылки (.hidepage) он запускает ajax, и когда он будет завершен, он изменит это имя ссылки и имя класса (на> showpage). И что не работает, когда вы снова нажимаете эту ссылку для показа страницы, она снова запускается.

$('.hidepage').on('click', function(e){ 
var pageStatus = $(this).closest('tr').find('.pagestatus'); 
var button = $(this); 
var pageID = $(this).attr('pageid'); 

$.ajax({ 
    type: 'POST', 
    url: Jarvis.ajax_url + 'hidepage', 
    data: { pageid: pageID }, 
    success: function(data) 
    { 
     console.log(data); 
     pageStatus.html('<span class="label label-default">Hide page</span>'); 
    }, 
    complete: function() 
    { 
     button.removeClass('hidepage').addClass('showpage').html('Show page'); 
    }, 
    error: function(xhr, textStatus, error){ 
     console.log(xhr.statusText); 
     console.log(textStatus); 
     console.log(error); 
    } 
}); 
}); 

И есть такой же код для класса showpage для противоположного действия. Все остальное работает. pageStatus меняется, имя ссылки меняется, но действие не делает. Спасибо за помощь! :)

Answer 1

Класс showpage динамически добавляется к элементам. Таким образом, обработчики событий не должны привязываться к .hidepage или .showpage, а к родительскому. Пример ниже:

Пусть родитель .showpage является #showPageDiv,

$('#showPageDiv').on('click', '.showpage', function() { 
    //handle show page 
}); 

Аналогичным образом, сделать для .hidepage потому, что может быть также добавлен динамически.