title: Memory leaks with change event that loads each time a new JQuery plugin DataTables
body: <p>I have problems with memory leaks.</p>
  
  <p>I display a table (with <a href="https://datatables.net/" rel="nofollow">DataTables plugin</a>) in my Html page following a select tag (<strong>Select2</strong>) that has an event <code>change()</code>.</p>
  
  <p>I noticed some memory leaks with the task manager (IE or FireFox).</p>
  
  <p>My code works well, the only problem is memory leaks.</p>
  
  <p>Here is my Html code, I have 2 tables, the second (<strong>table_statistic_10_ligne</strong>) is displayed when I click on one row of my first table (<strong>table_statistic_10</strong>), it displays the details of this row :</p>
  
  <pre><code>&lt;body&gt;
   &lt;select id="Select2" name="D1" style="margin-right :50px"&gt;
   &lt;/select&gt;
   &lt;script&gt;
      $("#Select2").change(function () { selectStat10(Select2.options[Select2.selectedIndex].value) });
   &lt;/script&gt;
  
   &lt;table id="table_statistic_10" class="display"&gt;
      &lt;caption class="caption"&gt;Detail van verkopen&lt;/caption&gt;
      &lt;thead&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
   &lt;/table&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  
   &lt;table id="table_statistic_10_ligne" class="display"&gt;
      &lt;thead&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
   &lt;/table&gt;
   &lt;script type="text/javascript"&gt;
      fillSlectTagStat10();
   &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my javascript code, in the success, I retrieve the values (retrieved from a web service in C#) and I fill them in the datatables :</p>
  
  <pre><code>function getStatistic10(dstart, dend, nam) {
  
  var response;
  var allstat10 = [];
  
  if (typeof myTabLigne10 != 'undefined') {
      myTabLigne10.fnClearTable();
  }
      $.ajax({
          type: 'GET',
          url: 'http://localhost:52251/Service1.asmx/Statistic_10_Entete',
          data: { "start": JSON.stringify(dstart), "end": JSON.stringify(dend), "name": JSON.stringify(nam) },
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
          success: function (msg) {
              response = msg.d;
              for (var i = 0; i &lt; response.Items.length; i++) {
                  var j = 0;
                  allstat10[i] = [response.Items[i].Nom, response.Items[i].Date, response.Items[i].Piece, response.Items[i].Tiers, number_format(response.Items[i].AmoutHT, 2, ',', ' '), number_format(response.Items[i].AmountTTC, 2, ',', ' '), response.Items[i].Quantite];
              }
              if (typeof myTabEntete10 != 'undefined') {
                  myTabEntete10.fnClearTable();
              }
              fillDataTableEntete10(allstat10, dstart, dend);
  
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert("error loading statistic 10");
              alert("Status: " + textStatus + "\n" + "Error: " + errorThrown);
          }
      });
  }
  </code></pre>
  
  <p>Filling dataTables code :</p>
  
  <pre><code>function fillDataTableEntete10(data, dstart, dend) {
  
  if ($("#table_statistic_10").css("visibility") == "hidden")
      $("#table_statistic_10").css("visibility", "visible");
  
  myTabEntete10 = $('#table_statistic_10').dataTable({
  
      'aaData': data,
      'aoColumns': [
          { "sTitle": "Nom" },
          { "sTitle": "Date" },
          { "sTitle": "Piece" },
          { "sTitle": "Tiers" },
          { "sTitle": "AmoutHT" },
          { "sTitle": "AmountTTC" },
          { "sTitle": "Quantite" }
      ],
  
      "sPaginationType": "full_numbers",
      "iDisplayLength": 10,
      "bJQueryUI": true,
      "bDestroy": true,
      "bPaginate": true,
      "bLengthChange": false,
      "bFilter": true,
      "bSort": false,
      "bInfo": false,
      "bAutoWidth": false,
      "sDom": '&lt;"top"f&lt;"clear"&gt;&gt;rt&lt;"bottom"ilp&lt;"clear"&gt;&gt;'
  
  
  });
  </code></pre>
  
  <p>I have approximately 10 values (customer) in the select tag (<strong>Select2</strong>). But one customer has about 20.000 rows that I fill in the datatables. And when I selected several times this customer, I see that the memory increases.</p>
  
  <p>I used <code>fnClearTable()</code> but it doesn't work.</p>
  
  <p>Have you an idea because I'm a little lost?</p>
  
  <p><strong>EDIT :</strong> I solved the problem, I updtate the DataTables with fnClearTable() and fnAddData(). But now, the problem is with my <strong>click</strong> event, I have memory leaks because of this code :</p>
  
  <pre><code>                myTabEntete10.$('tr').bind('click',function () {
                  var data = myTabEntete10.fnGetData(this);
                  $('tr').removeClass('row_selected');
                  $(this).addClass('row_selected');
                  loadData10(dstart, dend, data[2], data[3]);
                  delete data;
              });
  </code></pre>
  
  <p>Why?</p>