为什么我的 jQuery UI 按钮恢复为超大和通用？

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="https://rads.whosebug.com/amzn/click/com/1456405721" rel="nofollow noreferrer" 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="https://rads.whosebug.com/amzn/click/com/0448060000" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Hardcover</a>
    </button>
    <button><a href="https://rads.whosebug.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="https://rads.whosebug.com/amzn/click/com/B00L4Q7OA8" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
</section>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.whosebug.com/amzn/click/com/0486400778" rel="nofollow noreferrer" 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="https://rads.whosebug.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br />
    <br />
    <button>
        <a href="https://rads.whosebug.com/amzn/click/com/B008TVDBPI" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
    <button><a href="https://rads.whosebug.com/amzn/click/com/B00BM7ES7G" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Audible</a>
    </button>
</section>

在 _SiteLayout.cshtml 中，我像这样引用 jQueryUI .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" 主题正应用于选项卡需要）。

更新

我的网站是now live；但是，媒体选项卡上的按钮仍然比一袋烟头难看 9 倍。

你可以在这里看到他们在我为这个网站蚕食了代码的以前网站中的样子（事实上，我只是将整个网站复制到一个新文件夹并更改了必须更改的内容）：

同样，这是 jQuery 在上一个站点中使用 excite-bike 主题美化按钮的方法：

$('button').button();

...我正在引用 jQueryUI 像这样：

<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

正如 Jake Cigar 在 jQuery forum thread 上指出的那样，对 jQuery-UI 的调用按钮化了 HTML 加载后需要出现的按钮，所以这样做诀窍：

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

为什么我的 jQuery UI 按钮恢复为超大和通用？

Why have my jQuery UI buttons reverted to outsized and generic?

jquery

html

css

jquery-ui

jquery-ui-button

更新