好的,也许我没有正确解释我的意图。目的是基本上能够在新插入的html上运行一组函数 - 高效地,而不必手动调用它们。
现在,我将采用我下面写的代码。最初,您的页面上有模板,并且您为某些选择器(存在于模板中)绑定功能到所有模板。因此,当您将模板插入页面时,这些选择器尝试在模板内匹配,并运行绑定的函数。
下面的代码既不高效,也不经过优化或彻底测试。所以,我不会把它作为最终答案接受。这只是一个示例解决方案,而且有点破解。但它有效。我相信backbone.js或一些插件可以做得更好,所以我会等JS专家展示正确的方法。
顺便提一下:我意识到有两个缺点:a)设置HTML的方式必须通过模板对象完成,而不是自然的jQuery方式,b)模板被插入到DOM中,然后才开始运行函数。我的第一个版本确实在模板被插入之前就可以工作,但是一些函数(如.replaceWith()
)在字符串上与在DOM节点上的效果并不完全相同。好的一面是,代码很小,正好符合我的要求。
<html>
<body>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
window.template = {
queue: {},
set: function(container, content) {
/* first insert content */
container.html(content);
/* now run a list of functions in the queue */
$.each(this.queue, function(s, fs) {
var el = $(s, container);
for (var i = 0, len = fs.length; i < len; ++i)
el.each(fs[i]);
});
},
bind: function(selector, func) {
if (typeof this.queue[selector] === 'undefined')
this.queue[selector] = [];
/* push function to queue for that specific selector */
this.queue[selector].push(func);
}
};
$(function() {
var templateContents = $('#my-template').html();
/* for each <label>, replace it with another <input> */
template.bind('label[for="first_name"]', function() {
$(this).replaceWith('<input type="text" name="last_name" value="last name" />');
});
$('a').click(function(e) {
e.preventDefault();
$('body').append('<div class="container"></div>');
/* get the div that we just appended to body */
var newDiv = $('.container').last();
/* set that newDiv's html to templateContents, and run binded functions */
template.set(newDiv, templateContents);
});
});
</script>
</head>
<body>
<script id="my-template" type="text/template">
<label for="first_name">name</label>
<input type="text" name="first_name" />
</script>
<a href="#">add dynamically</a>
</body>
</html>
:)
- Jared Farrish