jQuery使用getScript加载UI导致日期选择器未定义导致错误

Question

因此，我试图创建一个可插入第三方网站的小部件，该小部件也正在使用jquery UI，但是试图使datepicker正常工作只是没有按预期的方式工作。

这是我的代码。

(function () {
        // Localize jQuery variable
        var myJquery;
        /******** Load jQuery if not present *********/
        if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.2.1') {
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js");
            script_tag.onload = scriptLoadHandler;
            script_tag.onreadystatechange = function () { // Same thing but for IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
            console.log('need to load latest jQuery')
        } else {
            console.log('dont need to load jQuery')
            myJquery = window.jQuery;
            loadJQueryUi();
        }

        function scriptLoadHandler() {
            console.log('latest jQuery loaded')
            myJquery = jQuery.noConflict(true);
            loadJQueryUi();
        }
        function loadJQueryUi() {
            console.log('main function')
            /******* Load UI *******/
            myJquery.getScript('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', function () {
                myJquery = jQuery.noConflict(true);
                console.log('loaded jquery UI')
                // jQueryApr(document).ready(function ($) {
                    setHandlers(myJquery)
                // });
            });
            /******* Load UI CSS *******/
            var css_link = myJquery("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"
            });
            css_link.appendTo('head');
        }

        function setHandlers($) {
            console.log('document ready')

                $('#start-date').datepicker({
                    dateFormat: "M dd, yy",
                    minDate: 'D',
                    numberOfMonths: 1,
                    onSelect: function () {
                        console.log($(this).val())
                    }
                });

        }
    })();

运行上面我得到的datepicker函数未定义。 但是如果我将datepicker函数包装在焦点事件中，即。

$(document).on('focus', '#start-date', function(){
    $('#start-date').datepicker({
        dateFormat: "M dd, yy",
        minDate:'D',
        numberOfMonths:1,
        onSelect:function () {
            console.log($(this).val())
            }
        });
});

这行得通。另外，我也尝试将setHandlers函数与准备好的文档包装在一起，但没有效果。 我的问题有明显的问题吗？

Answer 1

在匿名函数范围内，jQuery尚未全局存在。 如果要使用datepicker之类的Jquery函数，则需要通过Jquery对象myJquery访问该函数。 它在document.focus代码块内起作用，因为Jquery在代码运行时已全局加载。 您可能需要将datepicker调用留在某些事件处理程序中，例如document.focus或document.ready，以使其按预期工作。