Почему мои кнопки пользовательского интерфейса jQuery возвращены к негабаритным и общим?

Question

Я использовал JQuery UI прежде, чтобы придумать кнопки. Но теперь с этим кодом:

else if (ui.newTab.index() == 3) {
    $('#MediaContent').load('Content/TwainMedia.html');
    $('#MediaContent').css('background-color', '#000000');
    $('button').button();
    $("button:not(:ui-button)").button();
}

... кнопки огромные и некрасивые

HTML выглядит так:

<div class="yearBanner">FICTION</div>
<section class="wrapper"><a class="floatLeft" 
href="http://rads.stackru.com/amzn/click/1456405721" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51AxVB0JilL._SL110_.jpg" alt="The Adventures of 
Huckleberry Finn book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Huckleberry Finn</cite>
    <br/>
    <br/>
    <button><a href="http://rads.stackru.com/amzn/click/0448060000" target="_blank" 
rel="nofollow">Hardcover</a>
    </button>
    <button><a href="http://rads.stackru.com/amzn/click/1456405721" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="http://rads.stackru.com/amzn/click/B00L4Q7OA8" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
</section>
<section class="wrapper"><a class="floatLeft" 
href="http://rads.stackru.com/amzn/click/0486400778" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51qa7A+vIsL._SL110_.jpg" alt="The Adventures of 
Tom Sawyer book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Tom Sawyer</cite>
    <br/>
    <br/>
    <button>
        <a href="http://rads.stackru.com/amzn/click/0486400778" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br />
    <br />
    <button>
        <a href="http://rads.stackru.com/amzn/click/B008TVDBPI" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
    <button><a href="http://rads.stackru.com/amzn/click/B00BM7ES7G" target="_blank" 
rel="nofollow">Audible</a>
    </button>
</section>

В _SiteLayout.cshtml я ссылаюсь на jQuery UI .js и.css следующим образом:

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

Что мне нужно сделать, чтобы вернуть мои классные синие меньшие кнопки jQuery-UI?

Примечание: функция вкладки jQuery-UI работает на вкладках, как это видно на скриншоте (синяя тема "excite-bike" применяется к вкладкам по желанию).

ОБНОВИТЬ

Мой сайт сейчас работает; однако кнопки на вкладке мультимедиа по-прежнему в 9 раз страшнее, чем мешок окурков.

Здесь вы можете увидеть, как они выглядели на предыдущем сайте, чей код я каннибализировал для этого сайта (фактически я просто скопировал весь сайт в новую папку и изменил то, что нужно было изменить):

Опять же, это jQuery, который работал на предыдущем сайте, чтобы украсить кнопки с темой excite-bike:

$ ('Кнопка') Кнопка ().

... и ссылаюсь на jQuery UI так:

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

... (изменил "custom.min.css" на "custom.css"), но он все равно больше не работает. С чего бы это?

Answer 1

Как отметил Джейк Сигара в ветке форума jQuery, вызов jQuery-UI застегивает кнопки, необходимые для загрузки HTML-кода, и это делает свое дело:

$('#MediaContent').load('Content/TwainMedia.html',function(){
      $('button').button();
});