JQuery .on 事件未触发

Question

我有一个关于事件的 jquery，以便将一些数据传递到引导模式窗口。这是模态的代码：

<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">&times;</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>

Answer 1

不确定您的代码的意义是什么，因为您实际上并没有对 val 做任何事情？但是试试这个：

<script type="text/javascript">
$('.open-renameFile').click(function () {
    console.log('Event fired!');
    var fileName = $(this).data('name');
    $(".modal-body #fileName").val( fileName );
    var fileId = $(this).data('id');
    $(".modal-body #fileId").val( fileId );
});     
</script>