Функция Javascript работает только после обновления страницы

Question

У меня есть форум, на котором есть кнопка «подписаться» и «отписаться». Когда вы ударяете его один раз, он изменяется, но затем не переключается обратно, пока страница не будет обновлена.

http://jsfiddle.net/7QPyL/

Вот мой код:

$(document).ready(function() { 

// Subscribe to topic subscribedtotopic 
$(".notsubscribedtotopic").click(function() { 
    var topicid = $(this).attr('rel'); 
    $(this).slideUp('fast'); 
    $(this).html('Unsubscribe From Topic'); 
    $(this).removeClass('notsubscribedtotopic').addClass('subscribedtotopic'); 
    $(this).slideDown(); 
    $.get("/base/Solution/SubScribeToTopic/" + topicid + ".aspx", 
    function (data) { 
     var result = $('value', data).text(); 
    }); 
    return false; 
}); 

// UnSubscribe to topic subscribedtotopic 
$(".subscribedtotopic").click(function() { 
    var topicid = $(this).attr('rel'); 
    $(this).slideUp('fast'); 
    $(this).html('Subscribe To Topic'); 
    $(this).removeClass('subscribedtotopic').addClass('notsubscribedtotopic'); 
    $(this).slideDown(); 
    $.get("/base/Solution/UnSubScribeToTopic/" + topicid + ".aspx", 
    function (data) { 
     var result = $('value', data).text(); 
    }); 
    return false; 
    }); 
}); 

Answer 1

Это не работает, потому что класс не существует при добавлении обработчика событий, поэтому он не может найти элемент.

$(".notsubscribedtotopic") и $(".subscribedtotopic") не магически выбирают новые элементы, поскольку они добавляются на страницу.

Вы должны написать одну функцию и просто переключить состояние.

$(".subscribe").click(function() { 
    var link = $(this); 
    var isSubscribbed = link.hasClass("subscribedtotopic"); 
    link.toggleClass("subscribedtotopic notsubscribedtotopic"); 
    ... 
}); 

Answer 2

Я бы настроить свой код, чтобы быть что-то вроде этого:

$(document).ready(function() { 
    // Subscribe to topic subscribedtotopic 
    function subscribetotopic() { 
     var topicid = $(this).attr('rel'); 
     $(this).slideUp('fast'); 
     $(this).html('Unsubscribe From Topic'); 
     $(this).removeClass('notsubscribedtotopic').addClass('subscribedtotopic'); 
     $(this).slideDown(); 
     $.get("/base/Solution/SubScribeToTopic/" + topicid + ".aspx", 
      function (data) { 
       var result = $('value', data).text(); 
      }); 
     return false; 
    } 

    // UnSubscribe to topic subscribedtotopic 
    function unsubscribetotopic() { 
     var topicid = $(this).attr('rel'); 
     $(this).slideUp('fast'); 
     $(this).html('Subscribe To Topic'); 
     $(this).removeClass('subscribedtotopic').addClass('notsubscribedtotopic'); 
     $(this).slideDown(); 
     $.get("/base/Solution/UnSubScribeToTopic/" + topicid + ".aspx", 
      function (data) { 
       var result = $('value', data).text(); 
      }); 
     return false; 
    } 
}); 

А затем сделать простой OnClick вызов в вашем HTML-элемент, например, так:

<button onclick="subscribetotopic()">Subscribe</button> 

Если вы 'd предпочитаете, чтобы ваш код был таким, каким он есть, затем уточните, какой элемент вы хотите иметь. Пример (просто установить DIV ж/ид mymainelement и кнопки ж/ид subscribebutton):

$(#mymainelement .subscribebutton).click(function() { ... }); 

Если вы предпочитаете, чтобы переключить кнопку вместо двух отдельных элементов, проверить @ epsacarello Ответим.