爲什麼我不能在模板元素上使用jQuery函數？

我正在使用Blueimp的jQuery-file-upload插件，它使用了他的javascript模板引擎。我似乎無法影響通過模板使用jQuery函數呈現的任何元素，但是在模板之外的任何靜態方法都可以按照預期的方式工作。爲什麼我不能在模板元素上使用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

我希望這件事情簡單，我只是不知道有關使用模板的。有什麼建議麼？

來源

2014-03-29 Jesse Schoff

沒有在開發工具？ – Jonast92

什麼也沒有。 –

你試過執行你的jQuery代碼後，blueimp已經完成渲染模板並將其添加到dom中？或者使用事件代表團。 –

試試這個：在控制檯

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

來源

2014-03-29 17:10:28 friedi

沒有骰子。我真的不認爲這與jQuery代碼本身有什麼關係。 –

控制檯中是否有錯誤？ – friedi

@Mute但是，你有沒有嘗試委派事件??? –

爲什麼我不能在模板元素上使用jQuery函數？

回答

相關問題