Javascript 使用jqueryui'；带有ajax调用的s dialog（）函数
我试图在用户单击表单元格中的内容时显示一个弹出窗口（使用Jquery UI的dialog（）函数）。我使用从RESTURL上的Ajax调用返回的数据填充表。我得到了正确的数据，表格显示正确。问题是没有调用表单元格内文本的click（）函数 罪魁祸首似乎是Ajax调用，因为相同的方法适用于表中的静态数据 html文件中的代码段：Javascript 使用jqueryui'；带有ajax调用的s dialog（）函数,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我试图在用户单击表单元格中的内容时显示一个弹出窗口（使用Jquery UI的dialog（）函数）。我使用从RESTURL上的Ajax调用返回的数据填充表。我得到了正确的数据，表格显示正确。问题是没有调用表单元格内文本的click（）函数 罪魁祸首似乎是Ajax调用，因为相同的方法适用于表中的静态数据 html文件中的代码段： <head> $(document).ready(function(){
<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>
$（文档）.ready（函数（）{
$（“#dlg1”）。对话框（{autoOpen:false}）；
$（'.linkClass1'）。单击（函数（）{
$（“#dlg1”）。对话框（“打开”）；
});
$.ajax({
url:“http://localhost:8080/abc/rest/def",
键入：“获取”，
contentType:'application/json；charset=utf-8'，
成功：函数（resultData）{
var len=resultData.length；
var table=$（''）.addClass（'tableClass1'）；
var hRow=$（''）；
var hVar1=$（''）.addClass（'headingClass1'）.text（“col1”）；
hRow.append（hVar1）；
表.追加（hRow）；
对于（i=0；i，在绑定到$（'.linkClass1'）时。单击.linkClass1还不存在，或者在ajax成功结束时绑定到它，或者使用它
$('body').on('click', '.linkClass1', function
当前位置。此代码仅调用一次：
$('.linkClass1').click(function() {
$("#dlg1").dialog("open");
});
这意味着它只会找到调用时存在的.linkClass1
元素，并且只会将单击
处理程序绑定到这些元素。记住这一点
因此，本质上发生的事情是，这段代码从未将click
处理程序分配给AJAX调用后添加的元素
您可以通过将事件处理委托给一个在DOM生命周期内不会更改的公共父元素来解决此问题。任何父元素都可以，document
通常是一个可行的默认值。如下所示：
$(document).on('click', '.linkClass1', function() {
$("#dlg1").dialog("open");
});
这将把点击处理程序分配给文档
而不是元素，并且假设没有任何东西阻止点击
将“冒泡”的事件的传播从单击的元素到每个父元素，一直到文档
。该代码中的第二个选择器是一个过滤器，用于仅响应源自匹配元素的单击
事件。详细答案
与其应用jQuery单击处理程序，不如使用href
或onclick
标记调用所需函数，如下所示：
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);
}
....
一篇很好的博客文章很好地阐明了这个概念。干得好@David。
$(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");
});
},
});
});