jquery - Embedding javascript in <script id="template-download" type="text/x-tmpl"> -

i have following code

<script id="template-download" type="text/x-tmpl">                             {% (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 analyze" data-file="{%=file.name%}" data-target="[tracefile]" data-id="{%=file.id%}" data-idtarget="[trace_id]" data-formid="dashboard">                                                             {%=file.name%}   

i want add javascript code whenever {%=file.name%} clicked

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

is called.

please reply .

you'll have parse template html , add click events.

there 2 ways this, can either delegate them parent element or add them element directly.

not 100% sure you're trying achieve think best add class span , this:

$(document).ready(function() {    $('span.filename').on('click', $.blockui); }); 

if rendering template lot better delegate parent, jquery 1.7+ can use syntax:

var parentselector = ''; // parent selector here $(document).ready(function() {    $(parentselector || document).on('click', 'span.filename', $.blockui); }); 

if using older versions of jquery, use this:

$(document).ready(function() {    $('span.filename').live('click', $.blockui); }); 

delegating means binding handler on parent listen events on specific children.

also, make sure $ sign means "jquery", practice put inline script code in iife

so first example this:

(function($) {   $(document).ready(function() {      $('span.filename').on('click', $.blockui);   }); })(jquery);