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.
