我应该何时将事件绑定到由 Knockout 绑定生成的元素？

Question

我正在使用以下标记（删节）在表格中显示人员对象列表。我想在单击某行时打开一个“编辑详细信息”弹出窗口，但我的基本事件绑定不适用于通过 Knockout 数据绑定添加到表中的行。

<script>
    function PersonModel(data) {
        var self = this;
        self.id = data.Id;
        self.firstName = data.FirstName;
    }
    $(function () {
        function personListModel() {
            var self = this;
            self.persons = ko.observableArray([]);
            $.getJSON("Person/IndexJson", function (allData) {
                var mappedPersons = $.map(allData, function (item) { return new PersonModel(item); });
                self.persons(mappedPersons);
            });
        }
        ko.applyBindings(new personListModel());
        $(".person-row").click(function () {
            alert("Hello ");
        });
    });
</script>
<table>
    <tbody data-bind="foreach: persons">
        <tr class="person-row" data-bind="attr: { 'data-id': id }">
            <td data-bind="text: firstName"></td>
            <td data-bind="text: surname"></td>
            <td data-bind="text: email"></td>
            <td data-bind="text: cell"></td>
        </tr>
    </tbody>
</table>

如果我在页面呈现并绑定后从 JS 控制台绑定单击事件处理程序，则该处理程序被正确调用，但上面代码中的初始事件绑定根本不起作用。我必须做什么才能绑定到由淘汰赛生成的行。我认为在ko.applyBindings() 之后绑定事件处理程序就足够了。

Answer 1

您需要使用 JQuery 的 on method 订阅页面加载后添加的 DOM 元素上的事件：

$(".person-row").on("click", function(event){
    alert("Hello ");
});

或者您可以使用click binding 结构并通过敲除处理订阅：

function personListModel() {
    var self = this;
            ...

    self.personClicked = function(data) {
        alert("Hello ");
    }
}

在你看来：

<tr class="person-row" data-bind="attr: { 'data-id': id }, click: $root.personClicked">

您可以在 fiddle 中看到它的实际效果。