淘汰赛模板无法处理 DOM 事件答案

【问题标题】：knockout template isn't able to handle DOM events淘汰赛模板无法处理 DOM 事件
【发布时间】：2014-02-21 19:05:19
【问题描述】：

我正在使用淘汰模板功能在我的页面中插入 HTML 模板。问题是，如果我修改模板插入的 DOM（例如添加 span elem），则不会为新添加的元素触发先前配置的事件（例如点击）。

我的模板是：

<script type="text/html" id="my-template">
    <p>From template</p>
    <div id="container">
        <span class="c" > click me! </span>
    </div>
</script>

然后我设置了一个事件来处理对 span 元素的点击。这工作正常。稍后 2s 后，添加了一个新的 span：

<span class="c" > click me! (2)</span>

因为我使用的是 jquery 的“on”，所以新的 span 也应该触发 click 事件。这没有发生，我不得不重新定义点击事件（在 6 秒后完成）

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

我认为您以错误的方式使用 KnockoutJS。 KnockoutJS 可以处理事件。请检查更新的小提琴。 http://jsfiddle.net/gp3Ef/5/

修改了你的模板<span data-bind="click:onclick" class="c" > click me! </span>

和你的视图模型

function MyViewModel() {
    this.name = ko.observable("hello");
    this.onclick=function(){
        alert('clicked on me');
    }
}

用完整的功能修改了小提琴

【讨论】：

【解决方案2】：

当您使用 jQuery on 时，您应该将事件添加到现有节点并使用适当的选择器，您唯一需要更改的是：

$('.c').on('click', function(){alert('clicked on span'); });

到

$(document.body).on('click', '.c', function(){alert('clicked on span'); });

这是您更新后的jsfiddle

【讨论】：