我使用DataTables来创建显示良好且可管理的表。为了获得数据，我使用了Ajax数据源，并准备了php脚本，该脚本连接到数据库，并以JSON格式显示屏幕日期上的echo。
assign.php
$q = "select o.id, a.id as aid, o.starttime,o.scid, count(case when v.severity = '0' then 1 else null end) as zero,
count(case when v.severity = '1' then 1 else null end) as one,
count(case when v.severity = '2' then 1 else null end) as two,
count(case when v.severity = '3' then 1 else null end) as three, o.starttime as start
from topic a, project v, person o
where a.id = v.topic_id and a.id = o.topic_id and o.starttime = '".$_GET['date']."'
group by o.id,o.starttime,o.scid,a.id order by id desc";
$result = $db->query($q)->fetchall(PDO::FETCH_ASSOC);
$arr = array();
foreach ($result as $row){
if ($row['scid']==1){
$button="<button id='"opener_".$row['aid']."'" class ='opener pure-button' >Edit</button>";
}
else{
$sys="";
$button="<button id='"opener_".$row['aid']."'" class ='opener pure-button' >Assign</button>";
}
array_push($arr, array($button,$row['zero'],$row['one'],$row['two'],$row['three'],$row['starttime']));
}
$str = json_encode($arr);
$str= "{'"aaData'":".$str."}";
echo $str;
显示表格的页面：
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).click(function(event) {
$( "#dialog" ).dialog( "open" );
$('<input>').attr({
type: 'hidden',
id: 'assetid',
name: 'assetid',
value: event.target.id
}).appendTo('#systemtoasset');
$("#divToDelete").remove();
var form = document.getElementById("nazwa");
var div = document.createElement("div");
div.id = 'divToDelete';
div.innerHTML = event.target.value;
form.appendChild(div);
});
});</script>
<script>
$(document).ready(function() {
$('#asset').dataTable( {
'"bProcessing'": true,
'"sAjaxSource'": 'ajax/testdata.php'
} );
} );
</script>
<table id='asset' class='display dataTable' cellpadding='0' border='0' cellspacing='0' aria-describedby='example_info'>
<thead>
<tr>
<th width='20%'>Button</th>
<th width='25%'>Low</th>
<th width='10%'>Medium</th>
<th width='10%'>High</th>
<th width='10%'>Critic</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th width='20%'>Button</th>
<th width='25%'>Low</th>
<th width='10%'>Medium</th>
<th width='10%'>High</th>
<th width='10%'>Critic</th>
</tr>
</tfoot>
</table>
echo "<div id='"dialog'"><br><br><p id='nazwa' >Select Person to link it with project</p><br><br><br>
<form action='/?page=test' id='persontoproject' method='post' class='asholder'><input id='existing' name='existing' value='' class='txt' style='width: 125px;' /><input type='submit' name='saveperson' value='Assign'></form>
</div>";
问题是，当用户点击表中显示的按钮（从ajax加载）时，处理点击的JS没有被执行。有办法解决这个问题吗？
我假设在发布的代码中使用$(.open)的点击事件是针对按钮的。
委托绑定
您可能需要将事件绑定委托给页面上最近的静态元素，而不是直接委托给按钮。
如果在按钮位于DOM中之前执行绑定脚本，则不会绑定事件。
在这种情况下，使用jQuery 1.7或更高版本，您可以使用带有委派的on（），类似于以下内容：
$('#asset').on('click', '.opener', function(event) {
我假设id为asset的元素已经在页面上，否则请使用$(document)或$('body')。
这将把事件绑定到静态元素（#asset），但将其委托给'.opener'选择器。
对于jQuery 1.7之前的版本delegate（），改为绑定事件，类似于：
$('#asset').delegate('.opener', 'click', function(event) {
请注意，on()和delegate()之间的参数顺序不同！
给提交按钮一个这样的id--
<input type='submit' name='saveperson' value='Assign' id="submit">
然后在jquery代码中放入
$("#submit").click(function(event) {
//// code
});