javascript - AJAX コンテンツのロード後にコールバックが 2 回実行される

Question

ウェイポイントの無限スクロール プラグインを使用してコンテンツをロードするページがあります。

AJAX 呼び出しが成功し、DOM 要素が追加された後、コールバックが実行され、カルーセル、ボタン、その他のアニメーションなどの JavaScript 機能が再初期化されます。

最初の AJAX 呼び出しで、切り替えを行うボタンが適切に機能します。次の AJAX 呼び出しでは、新しい DOM 項目が機能しますが、前のボタンをクリックするとトグルが 2 回実行されるようになりました。3 回目の呼び出しでは、元のアイテムが 3 回実行され、2 番目のアイテムが 2 回実行され、新しいアイテムが 1 回実行されるというように、4 回目というように、AJAX コンテンツが呼び出されると複合化が続けられます。

以前にロードされたコンテンツに影響を与えないようにコールバックを分離するにはどうすればよいですか? または、毎回コールバックが必要ないように、JS のグローバル状態を設定する方法はありますか?

擬似コード:

$('.infinite-container').waypoint('infinite', {

    onAfterPageLoad: function() { 

        //Carousel options     
        $('.carousel-container').carousel({
            options: here,
            ....
        }); 

        //Button Toggles
        $('.button').click(function(){

            var self = $(this); 

            $(this).siblings('.caption').animate({ 

               height: 'toggle'

               }, 200, function() {

                 // Callback after animate() completes.
                 if(self.text() == 'Hide Details'){

                   self.text('Show Details');

                 } else {

                   self.text('Hide Details');
                 }
            }); 
        }); 

     }   
});    

編集：みんなありがとう。すべての答えは、異なるが適切な解決策に私を導きます。選択されたものは、提案されたすべての問題の優れたコレクションであり、読む価値があるため選択されました。