jQueryが未定義のdatepickerでエラーを引き起こすgetScriptを使用して

Question

私は第三者のWebサイトに移動するウィジェットを作成しようとしていますが、ウィジェットは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()) 
        } 
       }); 

     } 
    })(); 

上記のI get 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を使ってその関数にアクセスする必要があります。 Jqueryはコードが実行されるまでにグローバルにロードされているため、document.focusコードブロック内で動作します。おそらくdocument.focusやdocument.readyのようなイベントハンドラの中にdatepickerの呼び出しを残して、それが期待どおりに動作するようにする必要があります。