javascript - 为什么 Javascript $(document.body) 不能加载到源文件之外？

Question

首先，简单介绍一下我的设置。

我有一个全局JS文件common.js，我在其中存储所有常用函数。该文件被捆绑并设置为与 _Layout.cshtml View 文件一起加载。

除此之外，我还有一个 View 文件，它生成一个如下所示的 html 对象:

<a class="printreport" href="#" data-reporttype="8" data-certid="1111">Print</a>

提到的 View 文件通过扩展方法加载javascript源文件

@section scripts {
    @Html.LoadVersionedJavascriptFile("~/location/sourcefile.js")
}

为了优化我的代码，我决定编写一个代码片段函数，这将使每个具有“printreport”类的 html 对象运行它

内部源文件:

$(function(){
    //other stuff

    //Every html object that has printreport as a class will run this function
    $(document.body).on('click', '.printreport', function () {

    //get reporttype data from object
    var reportType = $(this).data('reporttype');
    var link = $("#RootDirectory").val();

    switch (reportType) {
        //other cases
        case 8:     //Certification
            var certId = $(this).data('certid');        //Get certid data from object
            link += '/Reports/ReportPopUp.aspx?report=' + reportType + '&CertId=' + certId;
            break;
        }   
    //code
    });
});

在源文件内，它会按预期响应并工作。但是，如果我尝试将该代码段从 source.js 移至全局 common.js(我确认该文件在执行期间已加载)，它根本不会响应，并且单击链接不会执行任何操作:

common.js 文件内部:

//declaration of global variables

$(document).ready(function () {

}

$(document.body).on('click', '.printreport', function () {
    //code
}

common.js文件的结构如上，没有封装成任何东西。

我的问题是:我加载 document.body 部分是否不正确？造成这种无响应的可能原因是什么？

Answer 1

您应该将点击处理程序移至 $(document).ready 内:

$(document).ready(function () {
    $(document.body).on('click', '.printreport', function () {
        //code
    }
}

$(document).ready 是一个事件，当文档准备好时会触发该事件，并且由于您的 html 是从上到下解释的，因此当您的 jQuery 代码运行时，您的元素无法出现($(document.body))。