Javascript Asp.Net ScriptManager导致jQuery小部件出现问题

多年来，我一直在网站上同时使用ScriptManager和jQuerySlider小部件，但最近我遇到了一个问题，使小部件无法工作。我设法解决了这个问题，但这更多的是出于运气而不是专业知识。我希望有人能提供这个问题背后的理由，并希望修复可能会对其他有同样问题的人有用

我使用了一个脚本聚合器，它将我的脚本组合在一起-下面是它所包含的内容-为了简洁起见，所有代码段都已配对：

vendor/Modernizr.min.js
vendor/jQuery.3.0.0.min.js
vendor/jQuery-UI.1.12.1.min.js
vendor/jQuery-UI.TouchPunch.min.js
propriertary/LoanSelector.js
DefaultInit.js

以下是DefaultInit.js的内容：

$(document).ready(function () {
    loanSelector.init();
});

下面是LoanSelector.js的基本内容

var loanSelector = function () {

    var pub = {}, $ctl = $("#loan-selector"),
        $sliderAmount = $ctl.find(".slider-amount:first"),
        $widgetAmount = $sliderAmount.find(".widget:first");

    function initControl() {
        initWidgetAmount(100, 2000, 100, $("#hfStartAmount").val());
    }

    function initWidgetAmount(min, max, step, initialVal) {
        $widgetAmount.slider({
        });
    }

    pub.init = function () {
        initControl();
    };

    return pub;
} ();

现在它可以工作了——但只有在页面上没有ScriptManager的情况下才能工作

添加脚本管理器时，滑块小部件不会加载-无错误-无任何内容

缓存的元素是页面上的永久固定装置，因此它不是在某个时间点不存在元素的情况

以下是ScriptManager代码：

    <asp:ScriptManager ID="SM" runat="server"
        EnableCdn="true"
        LoadScriptsBeforeUI="false"
        EnablePageMethods="true">
    </asp:ScriptManager>

---

那么，有人能解释一下为什么它可能不起作用以及为什么修复程序起作用吗？

第一个方法在执行时填充变量：

var pub = {}, $ctl = $("#loan-selector"),
    $sliderAmount = $ctl.find(".slider-amount:first"),
    $widgetAmount = $sliderAmount.find(".widget:first");

因此，

#贷款选择器

、

。滑块金额：first

和

。小部件：first

需要在调用之前在页面的DOM中呈现

第二个变量在调用

loanSelector.init（）

时填充，并在代码中调用它的位置加载DOM

为您提供了一个服务器端脚本集合，控件可以轻松添加，但它会呈现到

标记和顺序列表中，这一点很重要-页面中的另一个控件可能意味着您所依赖的DOM在代码运行时尚未加载。脚本按顺序运行，但不等待DOM渲染完成

jQuery有自己的组件结构，您可以使用它，还有一个可以依赖的DOM就绪方法—您已经在

DefaultInit.js

中使用了它，这就是为什么

loanSelector.init（）

可以访问DOM，而直接执行的代码不能访问DOM的原因

您已经有了一个补丁，第二个脚本是更好的实践，因为它不依赖于执行时间

另一种选择是调用

$（文档）中的
loanSelector
函数。就绪

：

$(function(){
    // In this DOM ready function your elements should be ready to find
    var loanSelector = ...
    ...

    // And you may not need this, as you can init in the actual function
    loanSelector.init();
});

---

几个问题，控制台中有错误吗？你试过把调试器；进入函数的各个部分以查看命中的是什么？loanSelector的init（）函数是什么？我在pub对象上看到了它，但是您正在调用loanSelector.init（），您是否只需要调用loanSelector（）？我认为ScriptManager可能正在更改脚本的加载方式，如果您的脚本在加载HTML之前加载，那么它就找不到元素。最简单的检查方法是添加“conslole.log（$ctl.length）对于调用initWidgetAmount方法之前的每个工作和非工作解决方案。如果长度为0，则在非工作示例中，这表明调用该方法时未加载HTML内容。@andrewf-我已在Chrome中检查了该页面，没有看到任何明显错误-pub是公共接口-我在文档中调用init.ready.you接近显示模块模式。检查$（document）.ready（函数（）{if（typeof（loanSelector）==“undefined”）loanSelector.init（）；}）；如果这是真的，则需要取出脚本管理器。是否可能与scriptmanager的部分页面呈现有关？因此不会触发document.ready（）？

$(function(){
    // In this DOM ready function your elements should be ready to find
    var loanSelector = ...
    ...

    // And you may not need this, as you can init in the actual function
    loanSelector.init();
});