jQueryのタブは一部のウェブサイトでは機能しませんが、一部のウェブサイトでは機能しません。

Question

複数のウェブサイトで動作するタブ付きフォームを作成しようとしています。私はコードスニペットがいくつかのページで動作し、タブが存在し、正しく機能していることがわかりましたが、特定のウェブサイトではタブが表示されず、次のコンソールエラーが表示されます：Uncaught TypeError: $(...).tabs is not a function私はこれを自分でデバッグしたり、オンラインで回答を探したりする運がなかった。任意の助けいただければ幸い:)私はとの問題持って

ウェブサイト：正常に動作するように見えるhttp://www.jetstar.com/sg/en/home
ウェブサイト：以下のコードスニペットはjQueryのは、すでにウェブサイト上に存在しないと仮定していることhttps://tigerair.com.au/

注意を。私はjQueryの最新バージョンを最初にロードしてみました。

if (typeof($) == 'undefined') { 
    var $ = jQuery; 
} 

function createInvisibleDiv() { 
    var invisiblePageSizedDiv = document.createElement("div"); 
    invisiblePageSizedDiv.setAttribute("id", "pageDiv"); 
    invisiblePageSizedDiv.setAttribute("class", "overlay"); 
    document.body.appendChild(invisiblePageSizedDiv); 
    var style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.innerHTML = '.overlay{bottom:0; right:0; left: 0; top:0; overflow:hidden;background-color:rgba(88,88,90,0.8); z-index: 100; position:absolute;}'; 
    document.body.appendChild(style); 
    document.body.style.position = "relative"; 
} 

//this function creates the two tabs 
function createUnorderedList(){ 
    var $unorderedList = $("<ul></ul>"); 
    $unorderedList.attr("id", "unorderedList"); 
    $unorderedList.attr("class", "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all") 
    for (var i=1; i<3; ++i) { 
     var $linkItem = $("<li></li>"); 
     $linkItem.append(createLink(i)); 
     $linkItem.attr("class", "ui-state-default ui-corner-top") 
     $unorderedList.append($linkItem); 
    } 
    return $unorderedList; 
} 

function createLink(i){ 
    var $link = $("<a></a>"); 
    if (i==1) { 
     $link.attr({"href":'#foo', "title":"Foo"}); 
     $link.text("Foo"); 
    } else { 
     $link.attr({"href":'#bar', "title":"Bar"}); 
     $link.text("Bar"); 
    } 
    return $link; 
} 

function createFooForm() { 
    var $ele = $("<div></div>"); 
    $ele.attr("id", "foo"); 
    $ele.text("Thanks for looking at my code"); 
    return $ele; 
} 

function createBarForm() { 
    var $ele = $("<div></div>"); 
    $ele.attr("id", "bar"); 
    $ele.text("I super appreciate it!"); 
    return $ele; 
} 

function loadScript(url, callback) 
{ 
    // Adding the script tag to the head 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 

    // Then bind the event to the callback function. 
    script.onreadystatechange = callback; 
    script.onload = callback; 

    // Fire the loading 
    head.appendChild(script); 
} 

var generateTabsFunction = function() { 
    createInvisibleDiv(); 
    var $invisibleDiv = $('#pageDiv'); 
    var $containerDiv = $("<div></div>"); 
    $containerDiv.attr("id", "containerDiv"); 

    $containerDiv.append(createUnorderedList()); 
    $containerDiv.append(createFooForm()); 
    $containerDiv.append(createBarForm()); 
    $invisibleDiv.append($containerDiv); 
    $('body').append($containerDiv); 
    $("#containerDiv").tabs(); 
} 

$("<link/>", { 
    rel: "stylesheet", 
    type: "text/css", 
    href: "https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" 
}).appendTo("head"); 

loadScript("https://code.jquery.com/ui/1.12.1/jquery-ui.js", generateTabsFunction); 

Answer 1

あなたはjQueryのを含まれていますが、ご返信用JQueryUI