0

我想从 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 附加。

4

2 回答 2

3

您的代码存在多个问题。

首先，你不应该使用嵌套<script>标签。即使结束</script>标记位于 javascript 块中的字符串内，您仍应将其拆分，使其不会按原样显示，因为它可能并且会绊倒最符合标准的浏览器。更别提那些老...

同样，您应该避免在 ID 中使用点，因为在编写 jQuery 选择器时很容易忽略它。#id.something意思是“选择 idid也something应用了类的元素”。如果你不能没有它，你可以在编写你的选择器时转义它#id\\.something，这将“选择具有 id 的元素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>

如果您有一个包含所有模板项的已知容器，请.delegate()改为使用以避免全局绑定。

于 2011-06-13T20:19:56.497 回答
1

您不能在渲染模板后设置事件吗？

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

$('#static.'+obj.val).change(function() {
    ...
});
于 2011-06-13T18:58:53.160 回答