发光的JavaScript jQuery的模板

Question

我想发出从jQuery的模板，一些JS例如我有模板一样

<script id="tmplID" type="text/x-jQuery-tmpl"> 
<input id="static.${val}" type="text"/> 
<input id = "static2.${val}" type="text"/> 
<script type="text/javascript"> 
$('#static.'+${val}).change(function(){ 
    alert('some value'); 
}); 
</script> 
</script> 

当我把这个模板像

var obj = {val:'123'}; 
$('#tmplID').tmpl(obj).appendTo("some_container"); 

它呈现的JavaScript改变功能串在网页上，而我希望它被追加为可执行的JavaScript。
我很感激任何帮助
问候

Answer 1

您的代码有多个问题。

首先，你应该从来没有使用嵌套<script>标签。即使关闭</script>标签位于JavaScript块中的字符串中，您仍应将其分开，以便它不会以原样显示，因为即使符合最符合标准的浏览器，标签也可能会跳脱。更不用说旧的...

同样，你应该避免在ID中使用点，因为在编写jQuery选择器时很容易忽略。 #id.something意味着“选择编号为id的元素，其中也应用类something”。如果你不能没有它，你可以在编写像#id\\.something这样的选择器时跳过它，它将“选择编号为id.something”的元素。

将JavaScript放入您的模板中也是一个坏主意，您应该重新考虑您要实现的目标。几乎总有变通的办法：你可以绑定.delegate()或.live()你的事件，你只会在未来创建元素

• 。

• 而不是在脚本中对ID进行硬编码，您可以使用不同的选择器，例如，你可以应用一个独特的类来使用上面的绑定，所以它不会干扰现有的标记。如果您需要事件处理程序中的ID，则可以使用this.id或$(this).attr('id')轻松提取它。

• 如果您要在脚本中自定义'some value'，您可以将自定义属性添加到您的元素，例如， <input id="static_something" data-custom="some value" />并使用$(this).data('custom')在您的函数中提取它。

把所有的上述因素，我想你的代码重新写类似这样的东西：

<script id="tmplID" type="text/x-jquery-tmpl"> 
<input id="static_${val}" class="templateinput" type="text" data-custom="value1" /> 
<input id="static2_${val}" class="templateinput" type="text" data-custom="value2" /> 
</script> 

<script type="text/javascript"> 
// jQuery ready function 
$(function(){ 
    $('.templateinput').live('change', function(){ 
     var element_id = this.id; 
     var element_data = $(this).data('custom'); 

     alert('The value of input #' + element_id + ' is: ' + element_data); 
    }); 
}); 
</script> 

如果你有一个已知的容器，其中将包含所有的模板项目，使用而不是为了清楚起见以避免全局绑定。

Answer 2

难道你只是在渲染模板后设置事件吗？

var obj = {val:'123'}; 
$('#tmplID').tmpl(obj).appendTo("some_container"); 

$('#static.'+obj.val).change(function() { 
    ... 
});