Почему мой JavaScript для приостановки и приостановки работы пользователя не работает правильно?

Question

Я создаю сайт для кого-то, и на стороне администратора есть страница «Управление пользователями» для управления пользователями сайта.Вот две мои функции для приостановки и отмены (и для предупреждения):

var admin = {
    alert: (function(msg,dur) {
        if(!dur || dur == null) {
            dur = 1500;
        }
        $('#alert_box2').remove();
        $('body').append('<div id="alert_box2" style="width: 100%; height: 9px; top: -17px; left: 0; position: absolute; text-align: center; z-index: 5;"><div id="alert_box_inner2"></div></div>');
        $('#alert_box2').show(0, function() {
            if(dur!=='none') {
                $('#alert_box_inner2').html(msg).stop(true, true).fadeIn(800).delay(dur).fadeOut(800, function() {
                    $('#alert_box2').remove();
                });
            }
            else {
                $('#alert_box_inner').html(msg).show();
            }
        });
    }),
    suspendUser: (function(id) {
        admin.alert('Please wait...',20000);
        $.get('user_more_actions.php?action=suspend&nolightbox=1&id='+id, function(data,textStatus) {
            setTimeout(function() {
                if(textStatus=='success') {
                    if(data.indexOf('suspended') > -1) {
                        name = data.replace('suspended ','');
                        admin.alert(name+' is now suspended.',2500);
                        $('#status_'+id).html('<strong style="color: red;">Suspended</strong>');
                        $('#suspend_'+id).attr('id','unsuspend_'+id).text('Unsuspend').removeClass('suspend').addClass('unsuspend');
                    }
                    else {
                        admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#suspend_'+id+'\').click();">Try again</a>','none');
                    }
                }
                else {
                    admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#suspend_'+id+'\').click();">Try again</a>','none');
                }
            }, 500);
        });
    }),
    unsuspendUser: (function(id) {
        admin.alert('Please wait...',20000);
        $.get('user_more_actions.php?action=unsuspend&nolightbox=1&id='+id, function(data,textStatus) {
            setTimeout(function() {
                if(textStatus=='success') {
                    if(data.indexOf('unsuspended') > -1) {
                        name = data.replace('unsuspended ','');
                        admin.alert(name+' is no longer suspended.',2500);
                        $('#status_'+id).html('<strong style="color: green;">Active</strong>');
                        $('#unsuspend_'+id).attr('id','suspend_'+id).text('Suspend').removeClass('unsuspend').addClass('suspend');
                    }
                    else {
                        admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#unsuspend_'+id+'\').click();">Try again</a>',20000);
                    }
                }
                else {
                    admin.alert('Sorry, there was an error. <span class="s_link" onclick="$(\'#unsuspend_'+id+'\').click();">Try again</a>',20000);
                }
            }, 500);
        });
    })
};

И код, который запускает функции при нажатии на ссылку приостановки или отмены приостановки:

$('.suspend').each(function() {
    $(this).live('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('id').replace('suspend_', '');
        admin.suspendUser(id);
    });
});
$('.unsuspend').each(function() {
    $(this).live('click', function(e) {
        e.preventDefault();
        var id = $(this).attr('id').replace('unsuspend_', '');
        admin.unsuspendUser(id);
    });
});

Все работает нормально, за исключением того, что когда я нажимаю снова, все портится.При щелчке по ссылке «Приостановить» она изменяется на «Отменить» (и изменяет идентификатор).Но затем, если я нажимаю Unsuspend, он не работает, и он вызывает функцию admin.suspend() вместо admin.unsuspend() (и идентификатор не передается, поэтому имя не отображается):

Когда класс и идентификатор изменены, он должен вызвать либо admin.suspend(id_here), либо admin.unsuspend(id_here);, но это не так.

Кто-нибудь знает, почему это происходит?Заранее спасибо, и мне жаль, что этот пост длинный.

Answer 1

Я считаю, что способ написания ваших живых привязок неверен, они должны были быть связаны так:

$('.suspend').live('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('id').replace('suspend_', '');
    admin.suspendUser(id);
});

$('.unsuspend').live('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('id').replace('unsuspend_', '');
    admin.unsuspendUser(id);
});

Я упростил скрипту, показывая рабочий код по адресу: jsFiddle

Answer 2

Я возился с этим. Надеюсь, это поможет: http://jsfiddle.net/wKGKu/

Обновление: прочитав ваши опасения по поводу .each, я обновил код, чтобы продемонстрировать, что он не нужен: http://jsfiddle.net/wKGKu/2/

Answer 3

Вы присоединяете события к приостановить / отменить приостановку классы , но ваш обратный вызов AJAX изменяет атрибут id .Также вы ужасно злоупотребляете live().В конце концов ваш обработчик уже подключен к ссылке и не меняется после ваших вызовов AJAX.

Решение состоит в том, чтобы

1) оставить идентификаторы в покое - вы только путаете себя, изменяя их
2) переписать обработчик событий, чтобы либо не выполнять each(), либо не использовать live - объединить полностью, чтобы победить цель, стоящую за live()

$('.suspend').live('click', function(){
    var id = $(this).attr('id').replace('suspend_', '');
    admin.suspendUser(id);
    return false;
});
$('.unsuspend').live('click', function(e){
    var id = $(this).attr('id').replace('suspend_', '');
    admin.unsuspendUser(id);
    return false;
});