Question

我多年来一直在网站上使用ScriptManager和jQuery滑块小部件，但我最近遇到了阻止小部件工作的问题。我设法解决了这个问题，但这比运气专业更不幸运。我希望有人可以提供这个问题背后的推理，并且该解决方案可能对同样问题的其他人有用。

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

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>

如果我进行更改，我可以在页面上使用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");

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

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

<asp:ScriptManager>为您提供了一个服务器端的脚本集合，控件可以轻松添加，但它会呈现为<script>个标签列表，并且顺序可能很重要 - 页面中的另一个控件可能意味着在您的代码运行时，您依赖于尚未加载的DOM。脚本按顺序运行，但不要等待DOM渲染完成。

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

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

另一种方法是在loanSelector.init()中调用loanSelector函数：

$(document).ready

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

1 个答案: