-1

我需要帮助。当我从 create_table.php 文件中抛出 javascript 代码并将其添加到 script.js 文件中时，删除表中的行不起作用。如何分离这些文件？有人可以帮我完成这项工作吗？怎么了？谢谢。

index_table.html

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Table</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="write_table"></div><br /><br />
</body>
</html>

脚本.js

$(document).ready(function(){
    $.ajax({
        url:"create_table.php",
        cache: false,
        success: function(data){
            $("#write_table").html(data);
    }});
});

create_table.php

<script type='text/javascript'>
$(document).ready(function(){
  $('button.delete').click(function(e){
  var parent = $(this).closest('tr');
    $.ajax({
      cache: false,
      data: parent,
      success: function(){
      parent.fadeOut('fast', function(){
      parent.remove();
      });
    }
 });                
});
});
</script>
<?php
ini_set('display_errors', true);
error_reporting(E_ALL + E_NOTICE);
$tabela = new Tabela(); 
$header;
$data= array (      
        array ("row_1", "row_1", "row_1", null),    
        array ("row_2", "row_2", "row_2", "row_2"),
        array ("row_3", "row_3", "row_3", "row_3"),
        array ("row_4", "row_4", "row_4", "row_4")
);
$header = array("col_1","col_2","col_3","col_4"); 
$tablica1 = $tabela->NapraviTabelu($header, $data, true, true, true);
echo $tablica1;
class Tabela {
    function __construct() {
    }
public function NapraviTabelu($header, $data, $add=true, $edit=true, $delete=true){ 
$tablica1 = "<table border='3' id='tablicaId'><thead><tr>";     
  foreach ($header as $head){           
  $tablica1 = $tablica1."<th width='120px'>$head</th>"; 
  }
if($edit || $delete){
  $tablica1 .= "<th height='44px'>/*******/</th>";
 }
$tablica1 .="</tr></thead>";
  if (isset($data)){        
    foreach($data as $row){
    $tablica1 .="<tr>";
    foreach($row as $column){
  if ($column !=''){
    $tablica1 .= "<td height='44px'>$column</td>";  
  }
  else {$tablica1 .="<td></td>";}
  }                                         
if($edit || $delete)                
$tablica1 .= "<td align='right'>";
if($edit){$tablica1 .= "<button title='Edit'  type='submit'><img src='Update.png'/>  </button>";}
if($delete){$tablica1 .= "<button name='cmdEdit' class='delete' title='Delete'   type='submit'><img src='Remove.png'/></button>";}  
$tablica1 .= "</td></tr>";
}
return $tablica1 ."</table>";           
}
}

}
?>
4

1 回答 1

2

由于create_table.php是通过 加载的，因此在DOM 准备好ajax时，其中的元素并不存在。index_table.html您将需要在 ajax 调用完成后执行此代码，或者使用下面的事件委托。

而不是$('button.delete').click(function(e){执行以下操作：

$('#write_table').on('click', 'button.delete', function(e){
   /* ... */
});

on您可以在文档中阅读有关事件委托的更多信息。

于 2013-08-22T17:11:50.843 回答