JQuery - 行点击事件不会在新添加的表行上触发

Question

问题背景：

我在视图中有一个从数据库动态填充的表。视图中的过滤器允许用户选择需要在表格上显示的数据。数据的重新添加是通过删除当前表行，然后在其位置添加新数据来实现的。

问题：

在每个表格行上，我都可以单击在模态弹出窗口中呈现数据的行，每次用户更改过滤器列表时都会重新查询数据库，这需要删除表格数据然后重新填充. 新添加的行被选中时不会触发行点击事件。

代码：

表格在视图中填充如下：

@foreach (var component in @Model.ComponentDetailsList)
{
    <script>

        var codebase = '@component.Codebase';
        var component = '@component.ComponentName';
        var tfsLocation = '@component.ComponentDevTfsLocation';
        var tfsQaLocation = '@component.ComponentQaTfsLocation';

        AddRows(codebase, component, tfsLocation, tfsQaLocation);
    </script>
}

jQuery方法AddRows：

    function AddRows(codebase, component, tfsLocation, tfsQaLocation) {

    $html = '<tr><td id="codebaseCell"><b>' + codebase + '</b></td><td  id="componentCell">' + component + '</td><td class="hidden-xs hidden-sm" id="tfsDevCell">' + tfsLocation + '</td><td class="hidden-xs hidden-sm" id="tfsQaCell">' + tfsQaLocation + '</td><td><button type="button" class="btn btn-danger pull-left" id="deleteQueuedComponent">Delete</button></td></tr>';

    $("#componentTable tbody").append($html);
};

The Row On-Click 事件：

$(document).ready(function () {

$('#componentTable tr').click(function () {

var tfsCodebase = $(this).find('#codebaseCell').text();

alert(tfsCodebase);

var tfsComponent = $(this).find('#componentCell').text();

$.ajax({
    url: "/Release/GetComponentFiles",
    data: { codeBase: tfsCodebase, component: tfsComponent },
    success: function (component) {

        var count = 0;

        var componentName = component.componentName;

        var componentCodeBase = component.componentCodebase;

        for (var item in component.fileList) {

            var devItem = component.componentDevTfsLocation + '/' + component.fileList[item];

            var qaItem = component.componentQaTfsLocation + '/' + component.fileList[item];

            count++;

            AddRowsToModal(componentName, componentCodeBase, component.fileList[item], devItem, qaItem, count);
        }

        document.getElementById("modalInfo").innerText = 'Queued Files For: ' + component.componentName;

        $("#componentModal").modal('show');
    }
});
});
});

单击过滤器项时调用的函数。 ClearTableAndAddRows 函数删除表内容并重新添加它，但如上所述行单击事件处理程序将不再工作：

 $(document).ready(function () {

    $("#codebaseNameList li").click(function () {
        var codebase = $(this).text();

        $.ajax({
            url: "/Release/QueryComponentsByCodebase",
            data: { codebase: codebase },
            success: function (component) {

                for (var item in component.codebaseList)
                {
                    ClearTableAndAddRows(component.codebaseList[item].Codebase, component.codebaseList[item].ComponentName, component.codebaseList[item].ComponentDevTfsLocation, component.codebaseList[item].ComponentQaTfsLocation);

                    AddRowsToComponentList(component.codebaseList[item].ComponentName);

                }
            }
        });
    });
    });

JQuery 方法ClearTableAndAddRows 用于删除，然后将新行重新添加到现有表体中：

function ClearTableAndAddRows(codebase, component, tfsLocation, tfsQaLocation) {

$("#queuedFilesTable").empty();

$htmlFilteredRow = '<tr><td id="codebaseCell"><b>' + codebase + '</b></td><td id="componentCell">' + component + '</td><td class="hidden-xs hidden-sm" id="tfsDevCell">' + tfsLocation + '</td><td class="hidden-xs hidden-sm" id="tfsQaCell">' + tfsQaLocation + '</td><td><button type="button" class="btn btn-danger pull-left" id="deleteQueuedComponent">Delete</button></td></tr>';

$("#componentTable tbody").append($htmlFilteredRow);
};

Answer 1

事件处理程序仅绑定到当前选定的元素；在您的代码进行事件绑定调用时，它们必须存在于页面上。

您需要使用Event Delegation 使用.on() delegated-events 方法动态添加元素。

$('#componentTable').on('click','tr', function () {
   //Your code
});

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将点击事件绑定到动态创建的元素，同时避免频繁附加和删除事件处理程序的需要。

Answer 2

好的。您的点击事件不会触发，因为您动态更改了 HTML。 $(document).ready() 在 DOM 准备好之后触发，并且在将新表格元素添加到 HTML 之前绑定事件。要解决这个问题，在这个动作之后绑定你的点击事件$("#componentTable tbody").append($html);或者使用.on('click' ...而不是.click(