Question

在我的主页面中，我通过jquery调用ajax文件，因为ajax文件是一些额外的jquery代码。原始链接如下所示：

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

然后是代码：

$(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');
   });
});

所以基本上点击了notify-function之后我正在更改链接的图标和网址，然后我删除了这些类，以便再次运行点击并将rel =“facebox”添加到链接中，以便如果他们试图点击显示的新icon2.png，将弹出facebox窗口。问题是在我点击初始图标后，一切正常，除非我尝试点击新的icon2.png，它仍然执行来宾操作的jgrowl代码。但当我查看来源时，它显示了这一点：

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

所以它似乎应该正常工作？我究竟做错了什么？我尝试将facebox代码添加到调用ajax文件的主页面，但问题仍然存在。

Answer 1

好看，我需要将facebox代码移动到自己的函数中，然后在删除类并取消绑定点击后调用它。像这样：

$(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();
   });
});

Jquery无法让facebox在ajax调用中工作

1 个答案: