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.
