jquery - 为什么我的 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.stackoverflow.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.stackoverflow.com/amzn/click/com/0448060000" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Hardcover</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.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.stackoverflow.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.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br />
    <br />
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/B008TVDBPI" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
    <button><a href="https://rads.stackoverflow.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();

...并像这样引用 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();
});