Question

所以我正在尝试创建一个小部件进入第三方网站，小部件也在使用jquery UI，但试图让日期选择器工作只是没有按预期工作。

这是我的代码。

function ShowModal(Title)
{
$("#modal").iziModal({                
    iconClass: 'icon-stack',
    overlayColor: 'rgba(255, 255, 255, 0.4)',
    width: 700,
    padding: 20
});

$("#modal").iziModal('setTitle',Title);
$("#modal").iziModal('setSubtitle',"SubTitle : " + Title);


$('#modal').iziModal('open');
}

运行上面的我得到的datepicker函数没有定义。但是如果我将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())
                    }
                });

        }
    })();

这有用..我也尝试用文件准备包装我的setHandlers函数但是没有效果。我的问题有明显的问题吗？

Answer 1

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

jQuery使用getScript加载UI导致未定义的datepicker错误

1 个答案: