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

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

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

$（“

文本
（
）
.appendTo（$（“#userClientGroup”）
.find（“#已搜索客户ul UCG”）；

---

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

你可以使用

ko.applybindings（viewModel，$（“#yourNewElement”）

。注意不要尝试绑定已经绑定的元素，否则会出错。

最好的方法是避免使用jQuery（或任何DOM方法）来追加新元素，为了避免必须根据这些元素绑定viewmodel。您可以使用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);
        }
    }
};

在要将

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"));

$（“
text
”）
.appendTo（$（“#userClientGroup”）.find（“#已搜索客户端ul UCG”）；

您不仅解决了这个问题，而且还用一个事件处理程序替换了很多潜在的事件处理程序。
为什么要动态添加这个？我得到的印象是，您试图解决问题的症状，但不是问题本身。如果您在绑定后添加内容，它确实不会绑定到该问题content@Smeegs我必须根据用户添加内容search@sroes是的，这些是我想解决的问题不，你可以更新模型，只要它是可观测的。但是，一旦容器已经具有绑定，就不能重新绑定。