Question

我正在使用Blueimp的jQuery-file-upload插件，它使用了他的javascript模板引擎。我似乎无法影响使用jQuery函数通过模板呈现的任何元素，但是在目标模板外部的任何静态工作都按预期工作。

例如，我试图简单地在悬停时向元素添加一个类，但是不能从中获取任何东西。没有错误，没有功能。

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

模板代码：

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

我完全难过了。我已经尝试在文档内部移动jQuery代码，在外部，用$(document).ready(function() {});包装它，在头部加载jQuery，在文档的末尾加载jQuery。

修改 - Live example

我希望这是一件简单的事情，我不知道如何使用模板。有什么建议吗？

Answer 1

试试这个：

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

为什么我不能在模板元素上使用jQuery函数？

1 个答案: