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

所以我试图手动将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()生成的标记不完全是我在那里发布的^^那是一个.button(用图标参数调用.问题是一样的,但是用一个简单的.button()调用它只需将所有内容包含在< span class =“ui-button-text中