javascript - 使用 jQuery 动态切换和更改 id

Question

我正在使用带有 jQ​​uery 的 twitter Bootstrap

我想知道如何在“订阅/取消订阅”之间切换

每次单击它都是一个 ajax 请求，因此用户可以订阅/取消订阅

用户订阅后，我会显示一条消息“已订阅！” 如果用户后悔并想取消订阅怎么办？

我想一键同时拥有这两种功能。我正在动态更改 ID，但它不起作用！

button class="btn" id="subscribe" data-toggle="button" data-loading-text="Loading..." data-complete-text="Subscribed!">订阅

$(document).ready(function () {
        $('#subscribe').button();
        $('#unsubscribe').button();
    });




    $('#unsubscribe').click(function () {   
        $('#unsubscribe').button('loading');

        $.ajax({
            url: "<%= "#{root_url}unsubscribe_from/#{@collection.id}"%>" ,
            type: "GET",
            data: "",
            success: function(data) {
                $('#unsubscribe').button('complete');
                jQuery("#unsubscribe").attr("id","subscribe");
                jQuery("#subscribe").attr("data-complete-text").text("Subscribed!");
                }});
                return false;

            });


$('#subscribe').click(function () {   
    $('#subscribe').button('loading');
    // $('#subscribe').button('reset');
    $.ajax({
        url: "<%= "#{root_url}subscribe_to/#{@collection.id}"%>" ,
        type: "GET",
        data: "",
        success: function(data) {
            $('#subscribe').button('complete');
            jQuery("#subscribe").attr("id","unsubscribe");
            jQuery("#unsubscribe").attr("data-complete-text").text("Unsubscribe!");
            }});
            return false;

        });

Answer 1

$(document).on('click', '#subscribe, #unsubscribe', function(){
    var url; 
    var button_id; 
    var button_text; 
    var self = $(this);  
    self.button('loading');

   if( this.id === 'subscribe' )
    {
        url = "<%= "#{root_url}subscribe_to/#{@collection.id}"%>"; 
        button_id = 'unsubscribe';
        button_text = 'Subscribed!';  
    }
    else 
    {
        url = "<%= "#{root_url}unsubscribe_from/#{@collection.id}"%>"; 
        button_id = 'subscribe'; 
        button_text = 'Unsubscribed!'; 
    }

      $.ajax({
        url: url,
        type: "GET",
        data: "",
        success: function(data) {
               self.button('complete');
               self.attr("id", button_id);
               self.attr("data-complete-text", button_text).text(button_text);
            }});
            return false;

      });
})

Answer 2

目前发生的是您的点击处理程序仅在开始时附加。因此，稍后更改 id 将不会附加处理程序。为此，您使用动态处理程序。

所以你应该做以下

$(document).on("click", "#subscribe", function(){ 
  // ...
});  

$(document).on("click", "#unsubscribe", function(){ 
  // ...
});  

有关更多详细信息，请参阅JQuery On。早些时候你会使用live