title: query click event for buttons inside a foreach loop
body: <p>I am populating a data-table from a model using a foreach loop:</p>
  
  <pre><code>@foreach(var item in Model)
      {        
      &lt;tr&gt;
          &lt;td style="display: none"&gt;@item.Id&lt;/td&gt;
          &lt;td&gt;@item.Name&lt;/td&gt;
          &lt;td&gt;@item.Description&lt;/td&gt;
          &lt;td&gt;
              &lt;div class="btn-group"&gt;
                 &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Update&lt;/button&gt;
                  &lt;button type="button" data-id=@item.Id id="Delete" class="btn btn-danger" data-dismiss="modal"&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      }
  </code></pre>
  
  <p>Each row of the table has an update and delete button. </p>
  
  <p>I'm struggling to bind the buttons to a click event using jQuery.</p>
  
  <p>Here is my script so far which is within the document ready function:</p>
  
  <pre><code>    var table = $('#productTable').DataTable();
  
      $('#productTable tbody').on('click', 'tr', function () {
          var data = table.row(this).data();
          alert(Product ID = ' + data[0] + ');
  
  //Call delete function and pass in Id
      });
  </code></pre>
  
  <p>This is understandably showing an alert anytime the user clicks the row. How to I get it to only fire when the delete button is clicked?</p>
  
  <p>Thanks in advance for any help.</p>