在<script id =“template-download”type =“text / x-tmpl”> </script>中嵌入javascript

时间:2014-12-16 10:58:11

标签: javascript jquery html html5 templates

我有以下代码

<script id="template-download" type="text/x-tmpl">
                            {% for (var i=0, file; file=o.files[i]; i++) { %}
                                    <tr class="template-download fade <?php if ($userExpired) echo 'restricted' ?> " search-name="{%=file.name%}" search-id="{%=file.id%}">
                                    {% if (file.error) { %}
                                            <td class="name">
                                                    <span class="delete"><input type="checkbox" name="delete" value="1" class="nomargin"></span>
                                                    <span >{%=file.name%}</span>
                                            </td>
                                            <td class="size right"><span>{%=o.formatFileSize(file.size)%}</span></td>
                                            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
                                    {% } else { %}
                                            <td class="name">
                                                    <span class="delete"><input type="checkbox" name="delete" value="1" class="nomargin"></span>

                                                    {% if (file.status_code == 2 || file.status_code == 3) { %}                                                             




                                                  <span class="clickcursor filename <?php if ($userExpired) echo 'restricted' ?> "  title="Click here to Analyze" data-file="{%=file.name%}" data-target="[tracefile]" data-id="{%=file.id%}" data-idtarget="[trace_id]" data-formid="dashboard">
                                                            {%=file.name%}  

我想在每次点击{%= file.name%}时添加一个javascript代码

<script type='text/javascript'>


$.blockUI.defaults.message="<h5><img src='../ajax-loader.gif'/>&nbsp;Loading...</h5>";

    $(document).ready(function(){
            set_trace_links();
    });
    function set_trace_links(){
    $.click (
    function(){
            $.blockUI();
    });
    } 
</script>

被召唤。

请回复。

1 个答案:

答案 0 :(得分:1)

您必须将该模板解析为HTML并添加点击事件。

有两种方法可以执行此操作,您可以从父元素委派它们,也可以直接将它们添加到元素中。

不是100%确定你想要实现的目标,但我认为最好在你的范围内添加一个类并执行此操作:

$(document).ready(function() {
   $('span.fileName').on('click', $.blockUI);
});

如果你正在渲染这个模板,那么最好从父代表委托它,从jQuery 1.7+你可以使用这个语法:

var parentSelector = ''; // YOUR PARENT SELECTOR HERE
$(document).ready(function() {
   $(parentSelector || document).on('click', 'span.fileName', $.blockUI);
});

如果您使用的是旧版本的jQuery,请使用:

$(document).ready(function() {
   $('span.fileName').live('click', $.blockUI);
});

委托只是意味着绑定父节点上的处理程序以侦听特定子节点上的事件。

另外,为了确保$符号实际上意味着&#34; jQuery&#34;,将内联脚本代码放在IIFE中是一种很好的做法

所以第一个例子看起来像这样:

(function($) {
  $(document).ready(function() {
     $('span.fileName').on('click', $.blockUI);
  });
})(jQuery);