Question: I am using twitter Bootstrap with jQuery 

and i was wondering how can i toggle between "Subscribe / UnSubscribe" 

Each click its an ajax request so the user can Subscribe / UnSubscribe 

Once a user subscribed i display a messege "Subscribed!"
What about if a user regret and want to unubscribed?

I would like to have in one button both functionality.
I am changing the id dynamically but it doent work!

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

```
$(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: 
```
$(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;

      });
})

```
What is happening at present is your click handler is getting attached at the start only. So later changing the id will not attach the handler. For this you use dynamic handler.

So you should do following

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

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

```

See [JQuery On](http://api.jquery.com/on/) for more details. Earlier you would have used [live](http://api.jquery.com/live/)