Question

I am changing the id of a modal button with this function

$('#editRevision a').click(function()
{   
    //clear the uploadify queue
    $('#file_upload').uploadifive('clearQueue');

    //change the id of the footer next button to pagesOrdered
    $('#next').attr('id' , 'pagesOrdered');
});

Just to check if the ‘.on(‘click’,function()) is working I use the following

//Pages ordered click
$('#pagesOrdered').on('click',function()
{
     alert('Testing');
});

My alert is not firing, however if I change the #pagesOrdered back to #next it does fire. What do I need to do to release #next from the DOM.

Thanks!

Answer 1

$('#pagesOrdered') doesn’t exist when you call the code. You can add the click handler after you change id or delegate on() to higher level of the DOM tree and use #pagesOrdered as selector

first approach:

$('#editRevision a').click(function(){   
    //clear the uploadify queue
    $('#file_upload').uploadifive('clearQueue');

    //change the id of the footer next button to pagesOrdered
    $('#next').attr('id' , 'pagesOrdered');
    //Pages ordered click
    $('#pagesOrdered').on('click',function(){
     alert('Testing');
     });
});

second approach:

 $(document).on('click','#pagesOrdered',function(){
     alert('Testing');
 });

You should also unbind events attached to #next before changing id. Changing id won’t remove them. Likely a simpler approach to what you are doing without changing id such as toggling a class and running class specific code in handler