Я использую плагин 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
Надеюсь, что-то простое, что я просто не знаю о работе с шаблонами. Какие-либо предложения?
Попробуй это:
$(function() {
$(document).on("mouseenter mouseleave", ".template-download", function() {
$(".deleteContainer").toggleClass("hidden");
});
});