我在使用jquery Datatables时遇到问题，我不知道为什么它不允许我打开在第 10 行之后调用的模式对话框，在表的第 1-10 行中一切正常，但是我不知道发生了什么其他人都失败了，因为在 chrome 控制台和网络中它没有显示任何错误，即使我的 ajax 调用执行得很好，问题是模式对话框没有打开，我拥有的代码是下列的：
数据表调用：
$(document).ready(function() {
$('#datatab').DataTable()
}
创建html表：
public function tablaDet($arreglo, $tipo, $tipoeq){
$r = json_decode(json_encode($arreglo),TRUE);
$th = array_keys($r[0]);
/*echo "<pre>";
print_r($r);*/
switch ($tipo) {
case 'lista':
$t = "<table id='datatab' class='display'>";
$t .= "<thead>";
$t .= "<tr>";
foreach ($th as $heads => $head) {
if ($head != "identificador") {
switch ($head) {
case 'nombre_depto':
$head = "Departamento";
break;
case 'nombre_persona':
$head = "Funcionario Actual";
break;
case 'dir_ip':
$head = "Dirección Ip";
break;
case 'mac':
$head = "Dirección Física";
break;
case 'nro_serie':
$head = "Nro. Serie";
break;
case 'codigo_ebye':
$head = "Código EBYE";
break;
case 'codigo_activo':
$head = "Código Activo";
break;
case 'documentos':
$head = "Documentos";
break;
case 'fecha_ingreso':
$head = "Fecha Ingreso";
break;
case 'nombre_prod':
$head = "Nombre Producto";
break;
case 'nombre_marca':
$head = "Marca";
break;
case 'avaluo_inicial':
$head = "Avaluo Inicial";
break;
case 'descr_procesador':
$head = "Procesador";
break;
case 'nombre_modelo':
$head = "Modelo";
break;
case 'nombre_cpu':
$head = "CPU";
break;
case 'nombre_mon':
$head = "Monitor";
break;
default:
# code...
break;
}
$t .= "<th>".$head."</th>";
}
}
$t .= "<th>Detalles</th>";
$t .= "<th>Actualizar</th>";
$t .= "<th>Eliminar</th>";
$t .= "</tr>";
$t .= "</thead>";
$t .= "<tbody>";
foreach ($r as $files) {
$t .= "<tr>";
foreach ($files as $cols => $col) {
if ($cols != "identificador") {
$t .= "<td>";
$t .= $col;
$t .= "</td>";
}
}
$t.='<td><a href="#" class="view_'.strtolower($tipoeq).'" id="view_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtener'.$tipoeq.'Det('.$files['identificador'].')"><i class="ui-icon ui-icon-circle-zoomout" style="color:black;"></i></button></td>';
$t.='<td><a href="#" class="act_'.strtolower($tipoeq).'" id="act_'.strtolower($tipoeq).''.$files['identificador'].'" onClick="obtenerCpu('.$files['identificador'].')"><i class="ui-icon ui-icon-refresh" style="color:black;"></i></button></td>';
$t.='<td><a href="#" onClick="eliminar'.$tipoeq.'('.$files['identificador'].')"><i class="ui-icon ui-icon-trash" style="color:black;"></i></a></td>';
$t .= "</tr>";
}
$t .= "</tbody>";
$t .= "</table>";
break;
default:
# code...
break;
}
return $t;
}
打开模态对话框：
$(function() {
var dialog, form;
dialog = $( "#details-cpu" ).dialog({
autoOpen: false,
height: 500,
width: "80%",
modal: true,
buttons: {
Cerrar: function() {
dialog.dialog( "close" );
}
},
close: function() {
//form[ 0 ].reset();
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
//actUser();
});
$('.view_cpu').click(function(e) {
e.preventDefault();
dialog.dialog('open');
});
/*$( "#act_user" ).button().on( "click", function() {
dialog.dialog( "open" );
});*/
});
编辑
这里我把问题放在了jsfiddle https://jsfiddle.net/s5w74xe7/1/
@Alvaro Montoro 的解决方案非常正确。我想出的另一个解决方案是监听表格的绘制事件并重新实例化事件处理程序。我的小提琴在这里。（这有点“草率”，但它有效！！）
错误如下：您在
click创建页面时关联事件处理程序：但是当页面创建时，表格中只有一定数量的元素（特别是 10 个），因此当您分页或更改每页的元素数量时，这些新元素没有任何与之关联的事件处理程序。
要解决这个问题，请使用委托事件，
.on()它会为您工作。您只需将上面的代码更改为：你可以在这个 JSFiddle 中看到它：https ://jsfiddle.net/s5w74xe7/2/
我用按钮做的，看看这个https://jsfiddle.net/lburgos/8zajd3fe/5/
您的示例Álvaro Montoro对我帮助很大，感谢您，我能够将其调整为按钮，非常感谢您，上帝保佑您。