在 <script id="template-download" type="text/x-tmpl"> 中嵌入 javascript答案

【问题标题】：Embedding javascript in <script id="template-download" type="text/x-tmpl">在 <script id="template-download" type="text/x-tmpl"> 中嵌入 javascript
【发布时间】：2014-12-16 10:58:10
【问题描述】：

我有以下代码

<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%}

我想添加一个 JavaScript 代码，每当点击 {%=file.name%} 时

<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>

被调用。

请回复。

【问题讨论】：

我的回复：你没有为你的问题付出任何努力。你只是在没有正确格式的情况下转储你的代码并要求我们修复它（甚至不告诉实际的错误/问题是）。

标签： javascript jquery html templates

【解决方案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);
});

委托只是意味着将处理程序绑定到父级以侦听特定子级的事件。

另外，为了确保 $ 符号实际上表示“jQuery”，最好将内联脚本代码放在 IIFE 中

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

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

【讨论】：