How to open an ajax created link on a modal window?

Question

Im totally new on jquery and here is my situation. When user clicks on add link it will shows up a modal form with fields(inputs) to fill in when clicking on add button it sends data by ajax to server-side if it succeed a new row on table appears with new data on main page with two links: one to edit and another one to delete, here is where is the trouble. These two links should open up a modal form too but its not working it only works when the page is refreshed. why? what i did wrong? thanks in advance.

js to submit data

 $("#btnsubmit").on('click',function(event){
     event.preventDefault();
     var title = $("input[name=title]").val();
     var artist = $("input[name=artist]").val();
     var action = 'add';
     $.post("album/ajax",{
          action : action,
          title  : title,
          artist : artist
        },
        function(data){
          if(data.response == true){
              alert("Inserido com sucesso!");
              var row_data= "";
              row_data +="<tr><td>"+title+"</td><td>"+artist+"</td><td><a href='album/edit/"+data.id+"' class='showModal'>Edit</a> <a href='album/delete/"+data.id+"' class='showModal'>Delete</a></td></tr>";
              $("#table").append(row_data);
           } else {
               alert("Nao foi possivel Add!");
           }
        },'json');
   });    

js to open page in modal window

 codigo js para abrir a janela modal

 $(function (){
  function handler() {
   if (this.readyState == this.DONE) {
    if (this.status == 200 && this.responseText != null) {
        $("#modal").html(this.responseText);
        return;
    }
    console.log('Something went wrong! Status = ' + this.status);
   }
 }

 var client = new XMLHttpRequest();
 client.onreadystatechange = handler;

 $(document).ready(function () {
 $("a.showModal").click(function () {
    //$("#modal").html('Loading ' + $(this).attr("href"));
    client.open("GET", $(this).attr("href"),true);
    client.send();
 var dialog;
 dialog =   $("#modal").dialog({
        autoOpen:true,
        width: 400,
        height: 450,
        modal: true,
        /*close: function () {
            $("#modal").html('');
        }*/
        buttons: [{ 
           text: "Cancelar", 
           click: function() { 
             dialog.dialog("close"); 
           }
        }],
        close: function () {
            $("#modal").html('');
        }
    });
    return false;
   });
  });
 });

index (main page)

 <?php 
  $title = 'My albums';
  $this->headTitle($title);
?>
 <h1><?php echo $this->escapeHtml($title); ?></h1>
 <a href="<?php echo $this->url('album', array( 
    'action'=>'add'));?>" class="showModal">Add Modal</a>
 <table class="table" id="table">
 <tr>
     <th>Title</th>
     <th>Artist</th>
     <th>&nbsp;</th>
</tr>
<?php foreach($albums as $album) : ?>
<tr>
 <td><?php echo $this->escapeHtml($album->title);?></td>
 <td><?php echo $this->escapeHtml($album->artist);?></td>
<td>
   <a href="<?php echo $this->url('album', array( 
    'action'=>'edit', 'id' => $album->id));?>" class="showModal">Edit Modal</a>
   <a href="<?php echo $this->url('album', array( 
    'action'=>'delete', 'id' => $album->id));?>" class="showModal">Delete Modal</a>
</td>
</tr>
<?php endforeach; ?>
</table>
<div id="teste">+</div>
<p id="p"></p>
<div id="modal"></div>