title: JQuery Append ajaxComplete Events to a Specific Element
body: <p>I having an issue with trying to add additional 'on ajax completion' events to a specific element.  I have the following unobtrusive JS function that dynamically loads any div with an attribute of 'ajax-loader'.  This function works well and it is in a global script file and used by many pages throughout my site, so <strong>I can't add any page specific functions to this script</strong>.</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(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); });
        });
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>This is a snippit from a page that would use the function above to dynamically load some content.  In this case, the content being loaded is a standard table.</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="MyDynamicDiv" ajax-loader="/SomePageThatReturnsATable"&gt;&lt;/div&gt;
    &lt;div id="MyPopUpDialog"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now, I want to add some script to the page above, that <strong>after loading the dynamic content</strong>, will format the table using the JQuery DataTables and adds a 'click' event to one of the buttons that opens up a JQuery Dialog and dynamically loads some other data into that dialog.  This is the script that I have come up with to accomplish this.</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
        $('#MyDynamicDiv').ajaxComplete(function () {
          console.log('MyDynamicDiv Load Complete'); 
          $('#MyDynamicallyLoadedTable').dataTable({"bJQueryUI": true});
          $('.myDialogButton').click(function () { $('#MyPopUpDialog').dialog().load('/MyDialogContent'); });
        });    
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that the <code>$('#MyDynamicDiv').ajaxComplete(function () {...});</code> is being called even when the dialog is loaded (basically for all ajax requests).  I only want it called when #MyDynamicDiv is finished loading (so only once).  I have the <code>ajaxComplete</code> function tied to that specific selector, so I don't know why it's firing for other load complete events.  </p>
  
  <p>I know that the function is being called repeatedly, even compoundingly, becuause the <code>console.log</code> is fired once the first time the page is loaded, twice when the dialog is first openened, four times when the dialog is opened a second time, etc.</p>
  
  <p>The problem is compounded when using the DataTables as it throws the following error when the dialog is loaded:</p>
  
  <p><strong>DataTables warning (table id = 'MyDynamicallyLoadedTable'): Cannot reinitialise DataTable.
  To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy</strong></p>
  
  <p>Are there other JQuery functions I should be using other than ajaxComplete, or what am I doing wrong?</p>