I'm trying to show a pop up (using Jquery UI's dialog() function) when user clicks on content inside a table cell. I'm populating the table using data returned from the Ajax call on a REST url. I get the correct data and the table is displayed correctly. The issue is that the click() function for the text inside the table cell doesn't get called.
当用户点击表格单元格内的内容时,我正在尝试显示弹出窗口(使用Jquery UI的dialog()函数)。我正在使用REST URL上的Ajax调用返回的数据填充表。我得到了正确的数据,表格显示正确。问题是不会调用表格单元格内的文本的click()函数。
The culprit seems to be the Ajax call since the the same approach works in case of static data inside the table.
罪魁祸首似乎是Ajax调用,因为相同的方法适用于表中的静态数据。
Snippets from the html file:
来自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>
On clicking the text inside table, nothing happens, just the original url is appended with #dummyId. I also tried using an alert() inside the click function and even that is not shown. Even setting async: false in the Ajax call doesn't help.
单击表格中的文本时,没有任何反应,只是原始URL附加了#dummyId。我也尝试在click函数中使用alert(),甚至没有显示。甚至在Ajax调用中设置async:false也无济于事。
If anyone can help, thanks.
如果有人可以提供帮助,谢谢。
3 个解决方案
#1
1
Long Answer
Instead of applying a jQuery click handler why don't you use the href or onclick tags to call the desired function as:
而不是应用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);
}
....
You can also afford to remove the click handler you had applied.
您还可以删除已应用的点击处理程序。
Short Answer
Just move the click handler at the end of the success event handler. This will ensure that when the click handler gets applied, all the DOM elements are present on the page.
只需在成功事件处理程序的末尾移动单击处理程序即可。这将确保在应用单击处理程序时,页面上将显示所有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");
});
},
});
});
#2
0
At the time of binding to $('.linkClass1').click .linkClass1 doesn't exist yet, either bind to this at the end of your ajax success or use
在绑定到$('。linkClass1')时。单击.linkClass1尚不存在,在ajax成功结束时绑定到此或使用
$('body').on('click', '.linkClass1', function
where it is now.
它现在在哪里。
#3
0
This code is only ever invoked once:
此代码只被调用一次:
$('.linkClass1').click(function() {
$("#dlg1").dialog("open");
});
Which means it's only going to find the .linkClass1 elements which exist at the time it's called and only going to bind click handlers to those elements. Remember that handlers are attached to elements, not to selectors.
这意味着它只会找到在调用时存在的.linkClass1元素,并且只会将点击处理程序绑定到这些元素。请记住,处理程序附加到元素,而不是选择器。
So what's essentially happening is this code is never assigning a click handler to the elements that are being added after the AJAX call.
所以本质上发生的是这段代码永远不会为AJAX调用后添加的元素分配一个点击处理程序。
You can fix this by delegating the event handling to a common parent element which doesn't change during the life of the DOM. Any parent element will do, document is usually a workable default. Something like this:
您可以通过将事件处理委派给在DOM的生命周期内不会更改的公共父元素来解决此问题。任何父元素都可以,文档通常是可行的默认值。像这样的东西:
$(document).on('click', '.linkClass1', function() {
$("#dlg1").dialog("open");
});
This will assign the click handler to the document instead of the element, and assuming nothing stops the propagation of the event that click will "bubble up" from the clicked element to every parent element, all the way up to document. The second selector in that code is then a filter used to respond only to click events which originated from matching elements.
这会将单击处理程序分配给文档而不是元素,并假设没有任何内容阻止事件的传播,点击将从点击的元素“冒泡”到每个父元素,一直到文档。该代码中的第二个选择器是一个过滤器,用于仅响应源自匹配元素的单击事件。
#1
1
Long Answer
Instead of applying a jQuery click handler why don't you use the href or onclick tags to call the desired function as:
而不是应用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);
}
....
You can also afford to remove the click handler you had applied.
您还可以删除已应用的点击处理程序。
Short Answer
Just move the click handler at the end of the success event handler. This will ensure that when the click handler gets applied, all the DOM elements are present on the page.
只需在成功事件处理程序的末尾移动单击处理程序即可。这将确保在应用单击处理程序时,页面上将显示所有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");
});
},
});
});
#2
0
At the time of binding to $('.linkClass1').click .linkClass1 doesn't exist yet, either bind to this at the end of your ajax success or use
在绑定到$('。linkClass1')时。单击.linkClass1尚不存在,在ajax成功结束时绑定到此或使用
$('body').on('click', '.linkClass1', function
where it is now.
它现在在哪里。
#3
0
This code is only ever invoked once:
此代码只被调用一次:
$('.linkClass1').click(function() {
$("#dlg1").dialog("open");
});
Which means it's only going to find the .linkClass1 elements which exist at the time it's called and only going to bind click handlers to those elements. Remember that handlers are attached to elements, not to selectors.
这意味着它只会找到在调用时存在的.linkClass1元素,并且只会将点击处理程序绑定到这些元素。请记住,处理程序附加到元素,而不是选择器。
So what's essentially happening is this code is never assigning a click handler to the elements that are being added after the AJAX call.
所以本质上发生的是这段代码永远不会为AJAX调用后添加的元素分配一个点击处理程序。
You can fix this by delegating the event handling to a common parent element which doesn't change during the life of the DOM. Any parent element will do, document is usually a workable default. Something like this:
您可以通过将事件处理委派给在DOM的生命周期内不会更改的公共父元素来解决此问题。任何父元素都可以,文档通常是可行的默认值。像这样的东西:
$(document).on('click', '.linkClass1', function() {
$("#dlg1").dialog("open");
});
This will assign the click handler to the document instead of the element, and assuming nothing stops the propagation of the event that click will "bubble up" from the clicked element to every parent element, all the way up to document. The second selector in that code is then a filter used to respond only to click events which originated from matching elements.
这会将单击处理程序分配给文档而不是元素,并假设没有任何内容阻止事件的传播,点击将从点击的元素“冒泡”到每个父元素,一直到文档。该代码中的第二个选择器是一个过滤器,用于仅响应源自匹配元素的单击事件。