0

我在尝试将其他“关于 ajax 完成”事件添加到特定元素时遇到问题。我有以下不显眼的 JS 函数，它可以动态加载任何具有“ajax-loader”属性的 div。此功能运行良好，它位于全局脚本文件中，并被我网站上的许多页面使用，因此我无法向此脚本添加任何特定于页面的功能。

  <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 对话框并动态加载的按钮之一其他数据进入该对话框。这是我为完成此任务而想出的脚本。

  <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因为第一次加载页面时触发一次，第一次打开对话框时触发两次，第二次打开对话框时触发四次，等等。

使用 DataTables 时问题更加复杂，因为在加载对话框时会引发以下错误：

DataTables 警告（表 id = 'MyDynamicallyLoadedTable'）：无法重新初始化 DataTable。要检索此表的 DataTables 对象，请不传递任何参数或查看 bRetrieve 和 bDestroy 的文档

除了 ajaxComplete 之外，我还应该使用其他 JQuery 函数吗，或者我做错了什么？

4

0 回答 0