Question

我将PHP代码加载到div中：

$(".loader").click(function(e) {
    event.preventDefault(); 
    $("#content").load($(this).attr("href"));
});

在目标代码中有一些html5内容，即：

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="inputFwFile">Upload</span>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputFwFile" aria-describedby="inputFwFile">
        <label class="custom-file-label" for="inputFwFile">Choose file</label>
    </div>
</div>

在我的js文件中，我想捕捉一些事件：

$("#inputFwFile").change(function(e) {
    console.log(e.target.files);
});

请注意，所有jQuery函数都包装在$("document").ready(function() ...语句中。如果将html代码段放置到主页（index.php）中，则上面的代码有效。相反，当加载到其div中时，content将不再执行change事件。

也许是因为当dom准备就绪时，特定的#intputFwFile还不存在吗？有什么办法解决吗？

更新

阅读评论后，我尝试了此操作：

index.php 文件

<div id="content">
</div>

index.js

$("document").ready(function() {
    $(".loader").click(function(e) {
        event.preventDefault(); 
        $("#content").load($(this).attr("href"));
    }); 
});

file.php

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputFwFile">Upload</span>
            </div>
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputFwFile" aria-describedby="inputFwFile">
                <label class="custom-file-label" for="inputFwFile">Choose file</label>
            </div>
        </div>

        <script type="text/javascript">
            $("document").ready(function() {
            $("#inputFwFile").change(function(e) {
                console.log(e.target.files);
            });
            });
        </script>

但是change函数仍然没有执行，即使它位于所请求元素的同一文件中，并且脚本在文档加载后运行。

为什么？

在div中加载PHP之后捕获事件

更新

0 个答案: