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