Question

  $("#btnAdd").click(function () {
    $.ajax({
      type: "POST",
      url: "View.aspx/AddResponsibility",
      data: '{"ClientCode":"' + $("#hfClientCode").val() + '","ResponsibilityCode":"' + $("#txtResponsibility").val() + '"}',
      async: true,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (msg) {
        $('#tblRespon > tbody:last').append("<tr><td>" + $("#txtResponsibility").val() + "</td><td>" + $("#txtFullName").val() + "</td><td><a class='delete' id='btnDelete' name='btnDelete' value='" + $("#txtResponsibility").val() + "'>" + "Delete" + "</a></td></tr>");
      },
      error: function (msg) {
        alert(msg.d);
      }
    });
  });

I need to add a class to the ‘< a>’ that is a new element I am adding. The way I’ve attempted above does not appear to be working as the function

$(".delete").click(function () {

does not fire as it does usually with an element already contained on the page.

Answer 1

You need to use .on() function like this:

$("#tblRespon").on("click",".delete",function(){