Question

I’m using the following jQuery ( https://github.com/blueimp/jQuery-File-Upload ) script to upload files. This script comes with this Javascript Template ( https://github.com/blueimp/JavaScript-Templates ).
I have the following in my html:

<script id="template-download" type="text/html">
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
<tr class="template-download fade">
    {% if (file.error) { %}
        <td></td>
        <td class="name">{%=file.name%}</td>
        <td class="size">{%=o.formatFileSize(file.size)%}</td>
        <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
    {% } else { %}
        <td class="name">
            <a href="{%=file.url%}" title="{%=file.name%}" target="_blank">{%=file.name%}</a>
        </td>
    {% } %}
    <td class="crop">
        <a class="btn btn-primary" id="tool-page-crop" href="#">Crop</a>
    </td>
    <td class="delete">
        <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">Delete</button>
    </td>
</tr>
{% } %}
</script>  

What I’m trying to do, is access the ‘a#tool-page-crop’ within this template from a jQuery plugin I’m writing ( so another JS file ) and somehow I don’t manage to do this.
Any ideas of how should I look at this?

Cheers!

Answer 1

It’s anyone’s guess without seeing the actual code that tries to access a#tool-page-crop, and the code that inserts it into DOM.

My usual suspect in a case like this is a race condition where your script has not yet inserted the template code into DOM, and you’re trying to access an undefined element.