Question

我正在使用淘汰模板功能在我的页面中插入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 class="c" > click me! (2)</span>

由于我正在使用jquery的“on”，新的span也应该触发click事件。这没有发生，我不得不重新定义点击事件（这是在6s之后完成）

Answer 1

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

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

和你的viewmodel

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

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

Answer 2

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

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

到

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

这是您更新的jsfiddle

knockout模板无法处理DOM事件

2 个答案: