Clicking on Ajax links twice doesn't work as expected (Cake PHP)

In my Cake PHP application, users can add a team to their watchlist. I have made adding and removing to watchlist Ajax operation using JQuery JsHelper. Both operations work fine independently.

However when a user adds a team to watchlist (works fine) and immediately clicks on remove from watchlist link, it loads the remove view only instead of updating th开发者_如何学Ce div without refreshing the page. But after adding a team to watchlist, user clicks on some other links (non-ajax) and then tries to remove the team from watchlist, it works fine.

I assume something is not being updated correctly when user add to watchlist and immediately remove from watchlist. Below is the controller and view code for both actions.

CONTROLLER CODE

    function add($team_id = null) {
    if(!$team_id)   {
        $this->Session->setFlash(__('Invalid team', true));
        $this->redirect(array('controller' => 'teams', 'action' => 'index'));
    }

    $this->data['Watchlist']['team_id'] = $team_id;
    $this->data['Watchlist']['user_id'] = $this->Auth->user('id');      
    $this->Watchlist->create();
    $this->Watchlist->save($this->data);
    $this->set('current_city', $this->Cookie->read('_current_cityid'));
    $this->set('watchlist_id', $this->Watchlist->id);
    $this->render('add', 'ajax');
}

function remove($id = null) {
    if (!$id) {
        $this->Session->setFlash(__('Invalid ID for watchlist', true));
        $this->redirect(array('controller' => 'team', 'action' => 'index'));
    }
    $this->Watchlist->delete($id); 
    $this->set('current_city', $this->Cookie->read('_current_cityid'));
    $this->set('watchlist_id', $id);
    $this->render('remove', 'ajax');
}

View Code

//add.ctp    
<?php echo $this->Js->link(__('Unwatch', true), array('controller' => 'watchlists', 'action' => 'remove', $watchlist_id), array('class' => 'btn', 'update' => '#watch-btn'));?>

//remove.ctp
<?php echo $this->Js->link(__('Watch this Team', true), array('controller' => 'watchlists', 'action' => 'add', $watchlist_id), array('class' => 'btn', 'update' => '#watch-btn'));?>

Any help in the matter would be highly appreciated. If the problem is not clear then please let me know.

JQuery Code

//After clicking on 'Add to watchlist' - Link ID incorrect

<a id="link-1577632165" class="btn" href="/watchlists/remove/4e96d2ca-9a10-409d-b7f5-0a4507063618">Unwatch</a>

//<![CDATA[
$(document).ready(function () {$("#link-1949180817").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#watch-btn").html(data);}, url:"\/watchlists\/add\/4e7c5af6-7110-426a-80d4-062207063618"});
return false;});});
//]]> 

//After reloading the page 'Add to watchlist' - Link IDs are correct

<a id="link-1441882285" class="btn" href="/watchlists/remove/4e96d31b-b600-4df3-9e86-1cb107063618">Unwatch</a>

//<![CDATA[
$(document).ready(function () {$("#link-1441882285").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#watch-btn").html(data);}, url:"\/watchlists\/remove\/4e96d31b-b600-4df3-9e86-1cb107063618"});
return false;});});
//]]> 

For those who may encounter this issue - solution to this problem was to set buffer to false in $options array of JsHelper link method call.