[英]Using jQuery to add Event Handler doesn't work
I am trying to generate a table of data and after I've made a row, attach an event handler to it.我正在尝试生成一个数据表,并在创建一行后,为其附加一个事件处理程序。 I've started by making a small test:
我首先做了一个小测试:
function AddActivityAbstractOnClickEvent(element) {
$(element).on('click', GetActivityFullDescription(1));
}
function GetActivityFullDescription(id) {
alert("Click");
}
And I call it here:我在这里称之为:
function GetActivityAbstracts() {
$.getJSON("http://localhost:52535/ExampleService.svc/GetTestTableData", function (testData) {
var object = $.parseJSON(testData);
var activityTable = $('#activityTable');
$.each(object, function (index, value) {
//index here is used to generate unique ids
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td id = "activityId_' + index + '" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td id = "activityName_' + index + '" style = "vertical-align: middle;">'
+ activityName + '</td>' +
//Add index for ids here
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
var $tableElement = $(tableElement);
activityTable.append($tableElement);
AddActivityAbstractOnClickEvent($tableElement);
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
When I go to my website however, the "Click" alert appears with every row that I add to the table before I add the table data itself but nothing happens when I click any of the rows on the site.然而,当我访问我的网站时,在我添加表格数据本身之前,我添加到表格的每一行都会出现“点击”警报,但是当我点击网站上的任何行时,没有任何反应。
Here is a full correction and commented code.这是完整的更正和注释代码。
function GetActivityAbstracts() {
$.getJSON("http://localhost:52535/ExampleService.svc/GetTestTableData", function (testData) {
var object = $.parseJSON(testData);
var activityTable = $('#activityTable');
// create HTML only by using $.map, it's better for perfs to generate all HTML before adding it into the dom
var html = $.map(object, function (item, index) {
//index here is used to generate unique ids
var activityId = item['ActivityId'];
var activityName = item['ActivityName'];
var activityResponsible = item['Responsible'];
var activityEstimatedSavings = parseFloat(item['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = item['EstimatedStart'];
var activityEstimatedEnd = item['EstimatedEnd'];
var activityStatus = item['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
// move id attr on on <tr>
return '<tr id="activityId_' + index + '">' +
'<td style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td id = "activityName_' + index + '" style = "vertical-align: middle;">'
+ activityName + '</td>' +
//Add index for ids here
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
});
// Add HTML into activityTable
activityTable.html(html);
// add event by using delegate event.
activityTable.on('click', 'tr', function() {
GetActivityFullDescription($(this).attr('id'));
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"]').tooltip();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.