0

特定の要素に「on ajax completion」イベントを追加しようとすると問題が発生します。「ajax-loader」の属性を持つdivを動的にロードする次の控えめなJS関数があります。この関数はうまく機能し、グローバル スクリプト ファイルにあり、サイト全体の多くのページで使用されているため、このスクリプトにページ固有の関数を追加することはできません。

  <script type="text/javascript">
    $(document).ready(function () {
      $('[ajax-loader]').each(function () {
        var loadContainer = $(this);
        var loadUrl = loadContainer.attr('ajax-loader');
        $.ajax({ url: loadUrl, type: 'GET', cache: 'false' }).done(function (data) { $(loadContainer).html(data); });
      });
    });
  </script>

これは、上記の関数を使用してコンテンツを動的にロードするページの抜粋です。この場合、ロードされるコンテンツは標準テーブルです。

<body>
  <div id="MyDynamicDiv" ajax-loader="/SomePageThatReturnsATable"></div>
  <div id="MyPopUpDialog"></div>
</body>

ここで、動的コンテンツをロードした後、JQuery DataTables を使用してテーブルをフォーマットし、JQuery ダイアログを開いて動的にロードするボタンの 1 つに「クリック」イベントを追加するスクリプトを上記のページに追加したいと思います。そのダイアログに他のデータ。これは、これを実現するために私が思いついたスクリプトです。

  <script type="text/javascript">
    $(document).ready(function () {
      $('#MyDynamicDiv').ajaxComplete(function () {
        console.log('MyDynamicDiv Load Complete'); 
        $('#MyDynamicallyLoadedTable').dataTable({"bJQueryUI": true});
        $('.myDialogButton').click(function () { $('#MyPopUpDialog').dialog().load('/MyDialogContent'); });
      });    
    });
  </script>

問題は$('#MyDynamicDiv').ajaxComplete(function () {...});、ダイアログがロードされている場合でも (基本的にすべての ajax リクエストに対して) が呼び出されることです。#MyDynamicDiv の読み込みが完了したときにのみ呼び出す必要があります (一度だけ)。私はajaxCompleteその特定のセレクターに関連付けられた関数を持っているので、他のロード完了イベントでなぜそれが起動するのかわかりません。

console.log最初にページが読み込まれたときに 1 回、ダイアログが最初に開かれたときに 2 回、ダイアログが 2 回目に開かれたときに 4 回など、関数が繰り返し呼び出されていることを知っています。

ダイアログのロード時に次のエラーがスローされるため、DataTables を使用すると問題が悪化します。

DataTables 警告 (テーブル ID = 'MyDynamiclyLoadedTable'): DataTable を再初期化できません。このテーブルの DataTables オブジェクトを取得するには、引数を渡さないか、bRetrieve と bDestroy のドキュメントを参照してください

ajaxComplete 以外に使用する必要がある他の JQuery 関数はありますか、または何が間違っていますか?

4

0 に答える 0