Question

问题背景：

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

问题：

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

代码：

该表在视图中填充如下：

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

行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()。

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

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

Answer 2

确定。您的点击事件不会触发，因为您动态更改了HTML。在DOM准备好之后，{ "_id" : { "municipality" : "Stockholm", "keyword" : "hotel" }, "total" : 2 }就会激活，并且在向HTML添加新表元素之前绑定事件。要解决此问题，请在执行此操作后绑定点击事件$(document).ready()或使用$("#componentTable tbody").append($html); ...代替.on('click'

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

2 个答案: