如何将JavaScript事件监听器预添加到由Mustache生成的元素中

Question

假设我有这个模板:

<script type="text/html" id="list_tpl">
<ul>
{{#list}}
    <li><input value="{{ name }}" /><a href="javascript:void(0);">delete</a></li>
{{/list}}
</ul> 
</script>  

渲染:

Mustache.to_html(document.getElementById("list_tpl").innerHTML), {
    "list": [
        {"name": "a1"},
        {"name": "a2"},
        {"name": "a3"}
    ]
});

我想绑定一个事件，当单击每个<li>中的delete链接时，该<li>将从DOM中删除。
我知道我可以在渲染完成后绑定事件，但由于渲染会发生几次(每次用户单击按钮)，我不想每次都绑定它。
怎样才能做得好呢?

Answer 1

我不确定如何用纯javascript，但Jquery有.live()http://api.jquery.com/live/

从那个网站:为现在和将来匹配当前选择器的所有元素的事件附加一个处理程序。

这正是你要问的。

这里有一些关于如何在纯javascript中做到这一点的相关信息:jQuery live()在纯JavaScript?

hth,

Answer 2

对于那些在谷歌搜索后仍在寻找答案的人:您可以使用jQuery来管理委托与"on"方法。

从jQuery 3.0开始，delegate和live方法都贬值了。

jQuery文档建议使用"on"方法代替委托和活动方法，还有另一个主题是在未来的元素中使用"on"方法:jQuery .on函数用于将来的元素，因为.live已弃用