Question

问候，

所以我试图手动将jQuery CSS类应用到我的元素中，这样用户就没有'flash'作为我的javascript样式的所有内容，因此没有启用JavaScript的用户可以看到它的纯粹性。

所以这是一个按钮的例子。我已经应用了.button()调用添加的所有类，并以相同的方式构建了我的标记。

<button id="my-button" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
    <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
    <span class="ui-button-text">Doit!</span>
</button>

这看起来很棒！当然它没有悬停样式等，但这是预期的。

然后我应用我的Javascript：

$('#my-button').button();

jQuery UI似乎并不知道现有的类/标记，它将我的可爱按钮变为：

<button id="my-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" type="submit" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
    <span class="ui-button-text">
        <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
        <span class="ui-button-text">Doit!</span>
    </span>
</button>

最后我的问题是：

如何在没有javascript的情况下手动应用CSS类，但仍然使用javascript函数添加交互功能？

编辑：确定所以.button()生成的标记不完全是我在那里发布的^^，它是带有icon参数的.button(调用。问题是一样的，通过简单的.button（）调用，它只包含<span class="ui-button-text

内的所有内容

Answer 1

您可以先清除该按钮，然后运行.button（）重新创建您的ui按钮

$('#my-button').html(function(){return $(this).text();}).button({ icons: {primary:'ui-icon-plus'}});

http://jsfiddle.net/MHaxd/1/

Answer 2

我认为这是一个已知问题（Button: support pre-rendered markup），正如您和我都期望的那样，额外的<span>元素有望在某一天实际上不会生成：）

手动将jQuery UI CSS类应用于元素会导致JS行为异常

2 个答案: