当用户单击表格单元格内的内容时，我尝试显示弹出窗口(使用 Jquery UI 的dialog() 函数)。我使用 REST url 上的 Ajax 调用返回的数据填充表。我得到了正确的数据并且表格显示正确。问题是表格单元格内文本的 click() 函数不会被调用。
罪魁祸首似乎是 Ajax 调用，因为相同的方法适用于表内的静态数据。
html 文件中的片段:
<head>
$(document).ready(function(){
$("#dlg1").dialog({ autoOpen: false });
$('.linkClass1').click(function() {
$("#dlg1").dialog("open");
});
$.ajax({
url: "http://localhost:8080/abc/rest/def",
type: "GET",
contentType: 'application/json; charset=utf-8',
success: function(resultData) {
var len = resultData.length;
var table = $('<table></table>').addClass('tableClass1');
var hRow = $('<tr></tr>');
var hVar1 = $('<th></th>').addClass('headingClass1').text("col1");
hRow.append(hVar1);
table.append(hRow);
for(i=0; i<len; i++)
{
row = $('<tr></tr>');
var var1 = $('<td></td>').addClass('cellClass1');
var linkVar1 = $('<a>')
.attr('class', 'linkClass1')
.attr('href', '#dummyId')
.text(resultData[i].id);
var1.append(linkVar1);
row.append(var1);
table.append(row);
}
$(table).attr("id","tableId1");
// this table is appended to an html element and is correctly displayed
},
});
});
</head>
<body>
<div id="dlg1" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
单击表格内的文本时，没有任何反应，只是原始网址附加了#dummyId。我还尝试在单击函数中使用alert()，但甚至没有显示。 即使在 Ajax 调用中设置 async: false 也没有帮助。
如果有人可以帮忙，谢谢。
最佳答案
长答案
为什么不使用 href 或 onclick 标签来调用所需的函数，而不是应用 jQuery 点击处理程序，如下所示:
function openDialog(){
$("#dlg1").dialog("open");
}
...
for(i=0; i<len; i++) {
row = $('<tr></tr>');
var var1 = $('<td></td>').addClass('cellClass1');
var linkVar1 = $('<a>')
.attr('class', 'linkClass1')
.attr('href', '#dummyId')
.attr("onclick", openDialog)
.text(resultData[i].id);
var1.append(linkVar1);
row.append(var1);
table.append(row);
}
....
您还可以删除已应用的点击处理程序。
简短回答
只需将click 处理程序移动到success 事件处理程序的末尾即可。这将确保当应用 click 处理程序时，所有 DOM 元素都出现在页面上。
$(document).ready(function(){
$("#dlg1").dialog({ autoOpen: false });
$.ajax({
url: "http://localhost:8080/abc/rest/def",
type: "GET",
contentType: 'application/json; charset=utf-8',
success: function(resultData) {
var len = resultData.length;
var table = $('<table></table>').addClass('tableClass1');
var hRow = $('<tr></tr>');
var hVar1 = $('<th></th>').addClass('headingClass1').text("col1");
hRow.append(hVar1);
table.append(hRow);
for(i=0; i<len; i++)
{
row = $('<tr></tr>');
var var1 = $('<td></td>').addClass('cellClass1');
var linkVar1 = $('<a>')
.attr('class', 'linkClass1')
.attr('href', '#dummyId')
.text(resultData[i].id);
var1.append(linkVar1);
row.append(var1);
table.append(row);
}
$(table).attr("id","tableId1");
$('.linkClass1').click(function() {
$("#dlg1").dialog("open");
});
},
});
});
关于javascript - 使用jquery UI的dialog()函数和ajax调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26017488/