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

Posted 2023-05-07

【中文标题】如何在动态添加的内容中绑定 knockout.js 中的事件？

【英文标题】：How to bind event in knockout.js in dynamically added content?

【发布时间】：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 是我想要解决的问题

不，你可以更新模型，只要它是一个可观察的。但是一旦容器已经有绑定，你就不能重新绑定。

【参考方案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"));

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