使用 jQuery 添加事件處理程序不起作用

Question

我正在嘗試生成一個數據表，並在創建一行后，為其附加一個事件處理程序。 我首先做了一個小測試：

function AddActivityAbstractOnClickEvent(element) {
    $(element).on('click', GetActivityFullDescription(1));
}

function GetActivityFullDescription(id) {
    alert("Click");
}

我在這里稱之為：

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();
    });
}

然而，當我訪問我的網站時，在我添加表格數據本身之前，我添加到表格的每一行都會出現“點擊”警報，但是當我點擊網站上的任何行時，沒有任何反應。

Answer 1

這是完整的更正和注釋代碼。

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();
    });
}