I can not get this to work for every button and I cannot find anything explaining why. I guessing it is something small that I am missing

$(document).ready(function() {
  // delete the selected row from the database
  $(document).on('click', '#business-area-delete-button', { model: "BusinessArea" }, deleteRow);
  $(document).on('click', '#business-type-delete-button', { model: "BusinessType" }, deleteRow);
  $(document).on('click', '#client-delete-button', { model: "Client" }, deleteRow);
  $(document).on('click', '#client-type-delete-button', { model: "ClientType" }, deleteRow);
  $(document).on('click', '#communication-channel-type', { model: "CommunicationChannelType" }, deleteRow);
  $(document).on('click', '#parameter-type-delete-button', { model: "ParameterType" }, deleteRow);
  $(document).on('click', '#validation-method-delete-button', { model: "ValidationMethod" }, deleteRow);
}

the event

function deleteRow(event){
  $.ajax(
    {
      type:'POST',
      data: { id: $(".delete-row").attr("id") },
      url:"/mysite/admin/delete" + event.data.model,
      success:function(data,textStatus){
        $('#main-content').html(data);
      },
      error:function(XMLHttpRequest,textStatus,errorThrown){
       jQuery('#alerts').html(XMLHttpRequest.responseText);
      },
      complete:function(XMLHttpRequest,textStatus){
        placeAlerts()
      }
    }
   );
   return false
};

This works only for a the button with id validation-method-delete-button. I use document and not the button its self because the button is contained in a template that is loaded later via ajax.

I have this working for a similar function that is selecting a row in a table however I am not attempting to pass data in that scenario.