Question

I have a list of items which have an open /close button next to each of them. I would like to toggle the open / close buttons. This seems to be work the first time the button is selected but then the function isn’t initiated the second time the button is selected. Anyone know why?

    //update status - close
    $("#close_<?=$order_id?>").click(function(){
        alert('close');
        order_update_type = 'updatestatus';
        order_status = '2';
        order_selected.set("status", order_status); 
        $("#close_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="open_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Re-open</span></a>');      
      });         

//update status - re-open
    $("#open_<?=$order_id?>").click(function(){
        alert('open');
        order_update_type = 'updatestatus';
        order_status = '1';
        $("#open_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="close_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Close</span></a>');            
      });

Answer 1

Rather than .click you must use .live because click only works for elements in the DOM at the time of setting up the click event. The live subscription looks for DOM updates also.

    //update status - close
    $("#close_<?=$order_id?>").live('click',function(){
        alert('close');
        order_update_type = 'updatestatus';
        order_status = '2';
        order_selected.set("status", order_status); 
        $("#close_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="open_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Re-open</span></a>');      
      });         

    //update status - re-open
    $("#open_<?=$order_id?>").live('click',function(){
        alert('open');
        order_update_type = 'updatestatus';
        order_status = '1';
        $("#open_<?=$order_id?>").replaceWith('<a data-align="left" class="km-button" data-role="button" id="close_<?=$order_id?>" style="float:left; margin:5px;"><span class="km-text">Close</span></a>');            
      });