У меня есть jquery на мероприятии, чтобы передать некоторые данные в модальное окно загрузки. Вот код из модального:JQuery .on event not firing
<div class="modal fade" id="renameFile" tabindex="-1" role="dialog" aria-labelledby="renameFile" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">close</span></button>
<h4 class="modal-title" id="formRenameTitle">rename</h4>
</div>
<div class="modal-body">
<form method="post" th:action="files">
<div class="input-group">
<input type="text" class="form-control" id="fileName" name="fileName" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">rename</button>
</span>
</div>
<input type="hidden" name="action" value="EDIT" />
<input type="hidden" name="fileId" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
и вот код для кнопки (она обычно живет в клетке сетки):
<a data-toggle="modal" data-id="${{file.id}}" data-name="${{file.name}}" title="rename" class="open-renameFile" href="#renameFile">
<span class="glyphicon glyphicon-pencil" aria-hidden="true</span>rename
</a>
Я использую thymeleaf для заполнения ячеек каждый ряд.
И в нижней части страницы, я включил этот JavaScript:
<script type="text/javascript">
$(document).on("click", ".open-renameFile", function() {
var fileName = $(this).data('name');
$(".modal-body #fileName").val(fileName);
});
$(document).on("click", ".open-renameFile", function() {
var fileId = $(this).data('id');
$(".modal-body #fileId").val(fileId);
});
</script>
Как вы узнали, что события не уволены? Вы уверены, что ваши 'id' уникальны в документе? Я имею в виду, что селектора типа '.modal-body # fileXXXX' не имеют смысла. Просто используйте '# fileXXXX'. – Teemu
Я бросил предупреждение в скрипте, и он так и не появился. Кроме того, поле не заполняется. – cscan