Jquery cant get facebox working inside ajax call

Question

From my main page I call an ajax file via jquery, in that ajax file is some additional jquery code. Original link looks like this:

<a href="/page1.php" class="guest-action notify-function"><img src="/icon1.png"></a>

Then the code:

$(document).ready(function(){

   $('a[rel*=facebox]').facebox();

   $('.guest-action').click( function() {
         $.get( $(this).attr('href'), function(responseText) {
             $.jGrowl(responseText);
         });
         return false;
   });

   $('.notify-function').click( function() {
        $(this).find('img').attr('src','/icon2.png');
        $(this).attr('href','/page2.php');
        $(this).removeClass('guest-action').removeClass('notify-function').attr('rel','facebox');
   });
});

So basically after notify-function is clicked I am changing the icon and the url of the link, I then am removing the classes so that the click wont be ran again and add rel="facebox" to the link so that the facebox window will pop up if they try to click the new icon2.png that shows up. The problem is after I click the initial icon everything works just fine except when I try to click the new icon2.png it still executes the jgrowl code from the guest-action. But when I view the source it shows this:

<a href="/page2.php" rel="facebox" class=""><img src="/icon2.png"></a>

So it seemed that should work right? What am I doing wrong? I tried adding the facebox code to the main page that is calling the ajax file as well and still same issue.

Answer 1

Ok looks like I needed to move the facebox code into its own function then call it after I remove the class and unbind the click. Like so:

$(document).ready(function(){

function reInit() {
   $('a[rel*=facebox]').facebox();
}

   $('.guest-action').click( function() {
         $.get( $(this).attr('href'), function(responseText) {
             $.jGrowl(responseText);
         });
         return false;
   });

   $('.notify-function').click( function() {
        $(this).find('img').attr('src','/icon2.png');
        $(this).attr('href','/page2.php');
        $(this).unbind('click').removeClass('guest-action').removeClass('notify-function').attr('rel','facebox');
reInit();
   });
});