1

jQueryでtwitterBootstrapを使用しています

「購読/購読解除」をどのように切り替えることができるのか疑問に思いました

ユーザーが購読/購読解除できるように、ajaxリクエストをクリックするたびに

ユーザーがサブスクライブすると、「Subscribed！」というメッセージが表示されます。ユーザーが後悔し、購読を解除したい場合はどうでしょうか。

1つのボタンで両方の機能を使用したいと思います。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;

        });
4

2 に答える 2

2 
$(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;

      });
})
于 2012-04-25T01:23:27.463 に答える
1

現在起こっていることは、クリックハンドラーが最初にのみ接続されていることです。したがって、後でIDを変更しても、ハンドラーはアタッチされません。このために、動的ハンドラーを使用します。

だからあなたは次のことをすべきです

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

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

詳細については、 JQueryOnを参照してください。以前はライブで使用していました

于 2012-04-25T01:19:33.213 に答える