如何将 jQuery UI 效果添加到从纯 HTML 文件加载的按钮？

Question

我正在以三种不同的方式动态更改我网站上的内容：

0) Reading json files via jQuery's getJSON('bla.json');
1) Retrieving jsonized C#/Razor classes via jQuery's getJSON('bla.cshtml');
2) Loading the html from a file via $('#divName').load('bla.html');

它们都工作正常，除了后者没有装饰/修饰我的按钮。

我想可能是因为 HTML 文件不了解 jQuery 和 jQuery UI，所以我在页面顶部添加了这些行：

<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>

...但没有区别。

要查看“实时”效果，请访问我的网站 www.awardwinnersonly.com - 书籍 > 马刺（西部）奖（刚刚开始 - 到目前为止只有一本书）是使用 Load('bla. html') 方法； Hugos 使用的是 cshtml，其他的都是原始的 json 文件。

这是马刺队的全部代码：

HTML（我删除了上面显示的行，因为它们没有任何帮助）：

<div class="yearBanner">2013</div><section class="wrapper" ><a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/B0085DOE2O" rel="nofollow noreferrer"" target="_blank"><img height="160" width="107" src="http://images.amazon.com/images/P/B0085DOE2O.01.MZZZZZZZ.jpg"alt="Tucker's Reckoning by Ralph Compton and Matthew Mayo book cover"></img></a><div id="prizeCategory" class="category">Best Short Novel</div><br/><cite id="prizeTitle" >Tucker's 
Reckoning</cite><br/><div id="prizeArtist" class="author">Ralph Compton and Matthew Mayo</div><br/><button><a href="https://rads.stackoverflow.com/amzn/click/com/B0085DOE2O" rel="nofollow noreferrer" target="_blank" rel="nofollow" >Kindle</a></button><button><a href="https://rads.stackoverflow.com/amzn/click/com/0451415612" rel="nofollow noreferrer" target="_blank" 
rel="nofollow" >Hardcover</a></button><button><a href="https://rads.stackoverflow.com/amzn/click/com/0451465482" rel="nofollow noreferrer" target="_blank" rel="nofollow" >Paperback</a></button></section>

CSS：

.yearBanner {
    font-size: 2em;
    color: white;
    font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
    width: 400px;
    padding-top: 50px;
    margin-left: 50px;
    padding-bottom: 20px;
}

.floatLeft {
    float: left;
    padding-right: 10px;
    padding-left: 5px;
}

section.wrapper {
    /* this may need to be wider when landscape cover img is used */
    min-width: 400px;
    overflow: hidden;
    display: block;
    float: left;
    margin-top: 5px;
}

.wrapper {
    float: left;
    width: 400px;
    margin-left: 20px;
    padding-bottom: 20px;
}

.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    width: 160px;
}

.categorySmallerFont {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 1.5em;
    color: Orange;
    width: 160px;
}

cite {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;
    width: 160px;
}

.author, .artist, .person {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

jQuery:

function getSpurs() {
    $('#BooksContent').load('Content/spurFirstPage.html');
    $('button').button();
    var $largest = 0;
    $(".wrapper").each(function () {
        if ($(this).height() > $largest) {
            $largest = $(this).height();
        }
    });
    $(".wrapper").css("height", $largest);
}

我可以从我的 html 文件中引用 _SiteLayout.cshtml，或者如何将所需的 jQuery 主题合并到我的按钮中？

Answer 1

.load() 是一个 ajax 函数。基本上，当你使用

$('#BooksContent').load('Content/spurFirstPage.html');
$('button').button();

页面中的按钮尚未加载，因此没有任何反应。

只需使用callback function:

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

如果您还需要什么，请告诉我。