javascript - Asp.Net ScriptManager 导致 jQuery Widget 出现问题

Question

多年以来，我一直在网站上同时使用 ScriptManager 和 jQuery slider 小部件，但最近遇到了一个问题，导致小部件无法正常工作。我设法解决了这个问题，但这更多的是运气而不是专业知识。我希望有人可以提供问题背后的原因，并且该修复可能对遇到相同问题的其他人有用。

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

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。

添加脚本管理器后， slider 小部件不会加载 - 没有错误 - 什么都没有。

缓存的元素是页面上的永久固定装置 - 所以这不是元素在某个时间点不存在的情况。

这是 ScriptManager 代码:

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

如果我进行更改，我可以使用页面上的 ScriptManager 加载小部件 - 这是另一个可用的 LoanSelector.js 版本:

var loanSelector = function () {

    var pub = {}, $ctl, $sliderAmount, $widgetAmount;

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

    function initControl() {
        // This is new
        cacheElements();

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

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

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

    return pub;
} ();

那么，任何人都可以阐明为什么它可能不起作用以及为什么修复有效吗？

Answer 1

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

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

所以 #loan-selector , .slider-amount:first和 .widget:first需要在调用之前呈现在页面的 DOM 中。

第二个变体在 loanSelector.init() 时填充被调用，并根据代码中调用它的位置加载 DOM。

<asp:ScriptManager>给你一个服务器端的脚本控件集合，可以很容易地添加到，但它呈现到 <script> 的列表中。标记和顺序可能很重要 - 页面中的另一个控件可能意味着您所依赖的 DOM 在您的代码运行时尚未加载。脚本按顺序运行但不等待 DOM 渲染完成。

jQuery 有它自己的组件结构，您可以使用它，还有一个您可以依赖的 DOM 就绪方法 - 您已经在 DefaultInit.js 中使用它了，这就是为什么 loanSelector.init()可以访问 DOM，而直接执行的代码则不能。

您已经有了修复，您的第二个脚本是更好的做法，因为它不依赖于执行时间。

另一种选择是调用您的 loanSelector $(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();
});