0

私のメイン ページから 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');
   });
});

したがって、基本的に通知機能がクリックされた後、アイコンとリンクのURLを変更しています。次に、クリックが再度実行されないようにクラスを削除し、リンクにrel = "facebox"を追加して、faceboxウィンドウが表示されるようにします表示される新しい icon2.png をクリックしようとすると、ポップアップが表示されます。問題は、最初のアイコンをクリックした後、新しい icon2.png をクリックしようとするとゲストアクションから jgrowl コードが実行されることを除いて、すべて正常に動作することです。しかし、ソースを表示すると、次のように表示されます。

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

それで、それは正しく動作するはずですか？私は何を間違っていますか？ajaxファイルを呼び出しているメインページにもfaceboxコードを追加しようとしましたが、それでも同じ問題が発生しました。

4

1 に答える 1

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();
   });
});
于 2011-01-01T07:45:40.953 に答える