jQuery選項卡在一些但不是所有的網站上工作

Question

我試圖創建一個選項卡式的表單，將跨越幾個網站工作。我發現代碼片段可以在一些頁面上工作，並且選項卡存在且功能正常，但是在特定網站上，選項卡不顯示，並且出現以下控制檯錯誤：Uncaught TypeError: $(...).tabs is not a function。我沒有任何運氣可以自己調試或在線搜索答案。任何幫助，將不勝感激:)

網站我有一個問題：http://www.jetstar.com/sg/en/home
網站似乎做工精細的：https://tigerair.com.au/

注意，下面的代碼片段假定jQuery不會在網站上已經存在。我曾嘗試加載最新版本的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的您的回覆