jQuery UI Buttonset不向子元素添加类

Question

我遇到了jQuery UI的buttonset函数的(间歇性)问题.有时当我调用它时,它只应用它添加到容器div和第一个子节点的类,有时它会完全按预期工作.(对不起,我不能为此做一个小提琴,我不能让它在我的应用程序之外发生.)与jQuery UI 1.10.0和1.10.4相同的问题.

即我从这开始:

<div class="my-buttonset">
    <input type="radio" name="option" id="option1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option" id="option2">
    <label for="option2">Option 2</label>

    <!-- More elements -->
</div>

调用buttonset后得到这个(注意单选按钮确实会添加一个不正确的类):

<div class="my-buttonset ui-buttonset">
    <input class="ui-corner-left" type="radio" name="option" id="option1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option" id="option2">
    <label for="option2">Option 2</label>

    <!-- Other elements unchanged -->
</div>

而不是这个:

<div class="container-fluid-full radio-row mode-radio-row ui-buttonset">
    <input class="ui-helper-hidden-accessible" type="radio" name="option" id="option1">
    <label class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-hover" for="option1" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Option 1</span></label>

    <input class="ui-helper-hidden-accessible" type="radio" name="option" id="option2">
    <label class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-hover" for="option2" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Option 2</span></label>

    <!-- Other elements correct -->
</div>

更新:我可以在我的应用程序中一致地重现这一点.该应用程序使用AngularJS,我有2个视图使用按钮集,称为"A"和"B".如果我转到"A",刷新页面,然后导航到"B",总会发生这种情况.它从不以相反的顺序发生,或者如果我从应用程序中的任何其他视图开始.以前,如果我重新创建它然后导航回"A"就不会发生,但现在我将它重构为指令,如果我在"A"处刷新,我看到正确的按钮设置,转到"B",我看到乱糟糟的版本,然后导航到"A",我也看到乱搞了一个,它也会影响第二个设置在"A"上的按钮,它不是指令的一部分.

我尝试在JS Fiddle中重新创建一个基本示例,其中两个视图使用buttonset,但这还不足以重新创建bug.

Answer 1

我已经为这个完全相同的问题伤透了大约一天的时间，但没有找到解决方案。

就我而言，问题在于 Bootstrap 的使用。

Bootstrap 还管理按钮，它使用与 Jquery UI 使用的名称相同的名称buttons。

解决方案（真的非常简单，就像找不到一样！！！）是简单地更改页面上的包含顺序：Bootstrap.jsfirst 和 then jquery-ui...js。

这个简单的事情解决了问题（即使它仍然是冲突）。

对于更可靠的解决方案，使用JQuery UI Bridge或将Bootstrap 置于无冲突模式可能有用（但我目前还没有测试这些解决方案，如果我 99% 确定它们会解决问题）。

注意：工具提示也存在同样的冲突。