Javascript 使用jQuery添加事件处理程序不会'；行不通

我正在尝试生成一个数据表，在生成一行之后，将事件处理程序附加到该表。我先做一个小测试：

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

函数GetActivityAbstracts（）{ $.getJSON（“http://localhost:52535/ExampleService.svc/GetTestTableData，函数（testData）{ var object=$.parseJSON（testData）； var activityTable=$（“#activityTable”）； $.each（对象、函数（索引、值）{ //此处的索引用于生成唯一ID var activityId=此['activityId']； var activityName=此['activityName']； var activityResponsible=此[‘责任’]； var activityEstimatedSavings=parseFloat（此['EstimatedSavings']）。toFixed（2）； var activityEstimatedStart=此['EstimatedStart']； var activityEstimatedEnd=此['EstimatedEnd']； var activityStatus=此[‘状态’]； //TODO:创建更为用户友好的状态描述，而不是C#枚举值。 变量表元素= '' + '' +activityId+“”+ '' + '' + '' +activityName+“”+ //在此处添加ID的索引 '' +activityResponsible+“”+ '' +活动估计储蓄+“”+ '' +activityEstimatedStart+“”+ '' +活动估计数+“”+ ''; 变量$tableElement=$（tableElement）； activityTable.append（$tableElement）； AddActivityAbstractOnClickEvent（$tableElement）； }); $（“#当前数据表”）.append（activityTable）； /*此调用是必需的，因为表是动态添加的*/ $（“[data toggle=“tooltip”）.tooltip（）； }); }

---

然而，当我访问我的网站时，在我添加表格数据之前，我添加到表格中的每一行都会出现“单击”警报，但当我单击网站上的任何行时，都不会发生任何事情。

以下是完整的更正和注释代码

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

函数GetActivityAbstracts（）{ $.getJSON（“http://localhost:52535/ExampleService.svc/GetTestTableData，函数（testData）{ var object=$.parseJSON（testData）； var activityTable=$（“#activityTable”）； //仅通过使用$.map创建HTML，perfs最好在将其添加到dom之前生成所有HTML var html=$.map（对象、函数（项、索引）{ //此处的索引用于生成唯一ID var activityId=项目['activityId']； 变量activityName=项目['activityName']； var activityResponsible=项目['Responsible']； var activityEstimatedSavings=parseFloat（项目['EstimatedSavings']）。toFixed（2）； var activityEstimatedStart=项目['EstimatedStart']； var activityEstimatedEnd=项目['EstimatedEnd']； var activityStatus=项目[“状态]； //TODO:创建更为用户友好的状态描述，而不是C#枚举值。 //将id属性移到on 返回“”+ '' +activityId+“”+ '' + '' + '' +activityName+“”+ //在此处添加ID的索引 '' +activityResponsible+“”+ '' +活动估计储蓄+“”+ '' +activityEstimatedStart+“”+ '' +活动估计数+“”+ ''; }); //将HTML添加到activityTable中 html（html）； //使用委托事件添加事件。 activityTable.on（'click'，'tr'，function（）{ GetActivityFullDescription（$（this.attr（'id'））； }); $（“#当前数据表”）.append（activityTable）； /*此调用是必需的，因为表是动态添加的*/ $（'[data toggle=“tooltip”]'）。tooltip（）； }); }

---

更改

$（元素）。在（'click'，GetActivityFullDescription（），false）；

==>

$（元素）。在（'click'，GetActivityFullDescription）；

1）您的

单击（）

处理程序语法错误。2）使用委托的语法处理程序，这样就不需要在每一行上绑定事件。@Tushar这不起作用。它修复了第一个问题，但在单击时什么也没有发生。如果知道为什么我得到了一个-1@RoryMcCrossan既然你知道我的错在哪里，你能提供一个可能的解决方案吗？：）我对JavaScript和jQuery还是相当陌生。请更新您的第一个代码并向我们提供

AddActionVotyAbstractOnClickEvent

的内容。我已经用您的完整代码和一些改进更新了我的答案谢谢！！问题出在哪里？我不知道，因为您发布的更正代码是正确的，但您在每个页面上都添加了1个单击事件行，并每次生成1个元素。我只需移动单击事件，并在一个步骤中生成行。