Delete button in a table using Javascript doesn't work. I cannot get the value of the edit button. I have this code:

Question

$(".btn-add-dependent").click(function () {
  var checked = $("#disability").is(':checked') ? "checked='checked'" : "";
  $("#dependents-info tbody").append(
     "<tr><td>" + $("#first-name").val() + "</td><td>" 
     + $("#middle-name").val() + "</td><td>" 
     + $("#last-name").val() + "</td><td>" 
     + $("#dependents-birthday").val() 
     + "</td><td><input type='checkbox' disabled='disabled'" + checked 
     + "</td><td><button><span class='btn-edit-dependent glyphicon glyphicon-pencil'></span></button><button><span class='btn-delete-dep glyphicon glyphicon-trash'></td></tr>");
  });

  // delete dependent button
  $('.btn-delete-dep').click(function () {
     alert('m;lasfdj;adsdas');
  });

Answer 1

$('#dependents-info').on('click','.btn-delete-dep',function () {
     alert('m;lasfdj;adsdas');
});