如何在动态添加的内容中绑定 knockout.js 中的事件？答案

【问题标题】：How to bind event in knockout.js in dynamically added content?如何在动态添加的内容中绑定 knockout.js 中的事件？
【发布时间】：2014-06-13 23:54:26
【问题描述】：

我想在数据绑定后添加一些内容到我的页面，例如：

 $("<li>
       <div>text</div>
       <div  data-bind='event: { click: selectContact }'></div>
    </li>")
     .appendTo($("#userClientGroup")
     .find("#searched-client-ul-UCG"));

但是，在这种情况下，点击事件不起作用；谁能给我解决方案？

【问题讨论】：

你为什么要动态添加这个？我的印象是您试图解决问题的症状，而不是问题本身。
好吧，如果你在绑定之后添加内容，它确实不会绑定到那个内容
@Smeegs 我要根据用户搜索添加内容
@sroes 是我想要解决的问题
不，你可以更新模型，只要它是一个可观察的。但是一旦容器已经有绑定，你就不能重新绑定。

标签： javascript knockout.js knockout-2.0

【解决方案1】：

你可以使用ko.applybindings(viewModel, $('#yourNewElement'))。注意不要尝试绑定已经绑定的元素，否则会报错。

【讨论】：

【解决方案2】：

最好的方法是避免使用 jQuery（或任何 DOM 方法）来附加新元素，以避免将视图模型绑定到这些元素。您可以使用 HTML 中的现有绑定或自定义绑定或组合来解决问题。您的绑定应该处理 DOM 操作，而不是您的其他代码（不需要了解 DOM）。

另一种方法是使用委托事件处理程序。我使用以下自定义绑定：

ko.bindingHandlers.delegatedEvent = {
    init: function (element, valueAccessor) {
        var options = ko.unwrap(valueAccessor()) || {},
            setupEventHandler = function (settings) {
                if (settings.data) {
                    $(element).on(settings.event, settings.target, settings.data, settings.handler);
                } else {
                    $(element).on(settings.event, settings.target, settings.handler);
                }

                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                    $(element).off(settings.event, settings.target, settings.handler);
                });
            };

        if ($.isArray(options)) {
            $.each(options, function () {
                setupEventHandler(this);
            });
        } else {
            setupEventHandler(options);
        }
    }
};

在<ul> 上使用它，您将li 插入如下：

<ul data-bind="delegatedEvent: { event: click, target: '.contact-select', handler: selectContact }">

在原始插入代码中添加类，并删除那里的数据绑定。

$('<li><div>text</div><div class="contact-select"></div></li>')
 .appendTo($("#userClientGroup").find("#searched-client-ul-UCG"));

您不仅解决了问题，而且还用一个可能替换了许多事件处理程序。

【讨论】：