Why can't I use jQuery functions on templated elements?

Question

I'm using Blueimp's jQuery-file-upload plugin which uses his javascript templating engine. I can't seem to affect any of the elements rendered via the template using jQuery functions, but anything static outside of the template works as expected when targeted.

For example, I'm trying to simply add a class to an element on hover, but can't get anything out of it. No errors, no functionality.

$( ".template-download" ).hover(
  function() {
    $( ".deleteContainer" ).addClass( "visible" );
  }, function() {
    $( ".deleteContainer" ).removeClass( "visible" );
  }
);

Template code:

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}

  <div class="template-download fade">
    <div class="preview">
      {% if (file.thumbnailUrl) { %}
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
      {% } %}
    </div>

    <div>
      <p class="name">
        {% if (file.url) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
        {% } else { %}
          <span>{%=file.name%}</span>
        {% } %}
      </p>
      {% if (file.error) { %}
        <div><span class="label label-danger">Error</span> {%=file.error%}</div>
      {% } %}
    </div>

    <div>
      <span class="size">{%=o.formatFileSize(file.size)%}</span>
    </div>

    <div class="deleteContainer hidden">
      {% if (file.deleteUrl) { %}
        <input type="checkbox" name="delete" value="1" class="toggle">
        <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
          <i class="glyphicon glyphicon-trash"></i>
        </button>
      {% } else { %}
        <button class="btn btn-warning cancel">
          <i class="glyphicon glyphicon-ban-circle"></i>
          <span>Cancel</span>
        </button>
      {% } %}
    </div>

  </div>
{% } %}
</script>

I'm totally stumped. I've tried moving the jQuery code internally within the document, externally, wrapping it with $(document).ready(function() {});, loading jQuery in the head, loading jQuery at the end of the document.

Edit - Live example

I hope it's something simple that I just don't know about working with templates. Any suggestions?

Answer 1

Try this:

$(function() {
    $(document).on("mouseenter mouseleave", ".template-download", function() {
        $(".deleteContainer").toggleClass("hidden");
    });
});