Question

我是关于jquery的新手，这是我的情况。当用户点击添加链接时，它会显示一个带有字段（输入）的模态表单，当点击添加按钮时，它会通过ajax向服务器端发送数据，如果成功，表格上的新行显示在主页面上的新数据有两个链接：一个要编辑，另一个要删除，这里就是麻烦。这两个链接也应该打开一个模式形式，但它不起作用它只在页面刷新时才有效。为什么？我做错了什么？提前谢谢。

js提交数据

 $("#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在模态窗口中打开页面

 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;
   });
  });
 });

索引（主页）

 <?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>

如何在模态窗口上打开ajax创建的链接？

0 个答案: