手动将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中

您可以先清除按钮,然后运行.button()来重新创建您的ui按钮

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

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

相关文章
相关标签/搜索