Question

我在尝试向特定元素添加额外的“on ajax completion”事件时出现问题。我有以下不显眼的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>

这是来自页面的snippit，它将使用上述函数动态加载某些内容。在这种情况下，正在加载的内容是标准表。

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

现在，我想在上面的页面中添加一些脚本，加载动态内容后，将使用JQuery DataTables格式化表格，并向其中一个按钮添加“click”事件这将打开一个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警告（table id ='MyDynamicallyLoadedTable'）：无法重新初始化DataTable。要检索此表的DataTables对象，请不要传递参数或查看bRetrieve和bDestroy的文档

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

JQuery将ajaxComplete事件附加到特定元素

0 个答案: