Question

我正在使用以下标记（删节）来显示表格中的人物对象列表。我想在单击一行时打开一个Edit Details弹出窗口，但是我的基本事件绑定对于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控制台绑定了一个click事件处理程序，则会正确调用该处理程序，但上面代码中的初始事件绑定根本不起作用。我该怎么做才能绑定到knockout生成的行。我认为在ko.applyBindings()之后绑定事件处理程序就足够了。

Answer 1

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

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

或者您可以使用click binding结构并使用knockout处理订阅：

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中看到它的实际效果。

什么时候应该将事件绑定到Knockout绑定生成的元素？

1 个答案: