title: Button in JQuery Datatable Won't Call JQuery Function
body: <p>I had a table within my MVC 5 View which repeated out rows of data. Each row had a button attached to it which when clicked upon would pass the data-id into a hidden text box using JQuery</p>
  
  <p><strong>MVC View</strong></p>
  
  <pre><code>@foreach (var item Model.MyList) {
  
  //&lt;tr&gt; etc
  &lt;td&gt;
    &lt;button class="btn btn-danger btn-xs" id="btnDelete" data-toggle="modal" data-target="#myModal" data-id="@item.ID"&gt; Delete &lt;/button&gt;
  &lt;/td&gt;
  
  }
  </code></pre>
  
  <p><strong>JQuery</strong> </p>
  
  <pre><code>$(document).ready(function () {
  
      //Everytime we press delete in the table row
      $('.btn.btn-danger').click(function () {
  
          //Update the text box with delete id so our model knows which one to delete
  
          $('#item-to-delete').val(id);
  
      });
  
  });
  </code></pre>
  
  <p>I then decided to replace my table with <a href="https://datatables.net/" rel="nofollow">https://datatables.net/</a> for several reasons. The problem now, is that when the user clicks the Delete button inside the Datatable, my JQuery click function is no longer called and therefore the delete ID is not passed into my hidden textbox.</p>
  
  <p>This is my DataTable script</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('#dataTables-example').dataTable({  
              "bServerSide": true,  
              "sAjaxSource": "/MyController/GetAjaxData",
              "bProcessing": true,
              "bJQueryUI": true,
              "aoColumns": [
                        { "sName": "ID", "visible": false },
                        null, //FullName
                        null, //Email
                        null, //LastLoginDate
                        {
                            "mData": null,
                            "mRender": function (data, type, full) {
                                return "&lt;button class='btn btn-danger btn-xs' id='btnDelete' data-toggle='modal' data-target='#myModal' data-id='"+ full[0] +"'&gt;Delete&lt;/button&gt;";
  
                            }
                        }
  
              ]
          });  
      });  
  &lt;/script&gt;
  </code></pre>
  
  <p>Can anyone please see why this is happening or advise me on how to fix the problem?</p>
  
  <p>Thanks alot.</p>