Javascript jQuery UI按钮设置不向子元素添加类

我对jQueryUI的buttonset函数有一个（间歇性）问题。有时当我调用它时，它只应用它添加到容器div和第一个子级的类，而其他时候它完全按照预期工作。（很抱歉，我无法对此进行修改，我无法让它在我的应用程序之外发生。）jQueryUI1.10.0和1.10.4都存在同样的问题

i、 e.我从以下几点开始：

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

选择1
选择2

并在调用buttonset后获取此信息（注意，单选按钮确实添加了一个不正确的类）：

选择1
选择2

与此相反：

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

选择1
选择2

更新：我可以在我的应用程序中始终如一地重现这一点。应用程序使用AngularJS，我有两个视图使用按钮集，分别称为“A”和“B”。如果我转到“A”，刷新页面，然后导航到“B”，就会发生这种情况。它从不以相反的顺序发生，或者如果我从应用程序中的任何其他视图开始。以前，如果我重新创建它，然后导航回“A”，则不会发生这种情况，但现在我将其重构为一个指令，如果我在“A”刷新，我会看到正确的按钮集，转到“B”，我会看到混乱的版本，然后导航到“A”，我也会在那里看到混乱的按钮集，它还会影响“A”上的第二个按钮集这不是指令的一部分

---

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

对您来说，最好的选择是从jQuery UI buttonset组件中生成一个指令。当组件的UI元素是Viisable时，它很可能加载良好，而当它不是Viisable时，它会失败

---

另一个选项是在加载新视图后立即调用jQuery init函数，这样可以确保在尝试初始化按钮集时按钮集可见。

尝试为页面的post角度链接创建一个指令（上的示例）

指令：

angular.module('app').directive('jsButtonset', function() {
    return function(scope, el, attrs) {
        el.buttonset();
    };
});

并在按钮容器处使用指令：

<div js-buttonset>

---

同样的问题让我头疼了大约一天，却找不到解决办法

在我的例子中，问题在于引导的使用

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

按钮

解决方案（非常简单，不可查找！！！）就是简单地更改页面上的包含顺序：

Bootstrap.js

，然后

jqueryui…js

这件简单的事情解决了问题（如果冲突仍然存在的话）

对于更固体的解决方案，可能有用或有用（但我目前还没有测试这些解决方案，如果我99%确定它们能解决问题的话）

---

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

根据您的描述，我猜类在页面上加载良好，当您导航到另一个页面时，类会出现错误，这意味着它在引用CSS时遇到问题。确保CSS是全局引用的。@Dexture我不确定我是否理解你的意思。无论CSS本身是否可用于页面，它都与添加错误类的JavaScript代码无关。如果它添加了正确的类而没有得到样式化，那将是一个完全不同的问题。（太长了，读不下去了，我们的CSS被编译成一个文件，并作为容器页面的一部分被加载。TL；DR所有页面都有CSS规则。）在所有DOM元素准备好之前，你可能会调用ButScIt吗？我从来没有尝试过angular，也不知道它是如何工作的，但在ember中，这是可能的，并且有一些特殊的方法可以让您进行jquery调用？从角度看还是从方向看？完成所有转换的函数调用在哪里？这些选项是否由ng repeat生成？因为可能发生的情况是，jQuery ui调用在AngularJS呈现DOM元素之前触发-所以这就是@GennadyDogaev的观点。我相信这是在一个指令中。不幸的是，在这一点上，我不再能够访问所讨论的代码（自从有人问起我就换了工作），而且我不知道我可以检查的应用程序的任何公共部署，所以在这一点上，其他任何事情都只是猜测。好吧，很难说确定，因为我不能检查，但我们都在使用它们，由于JS是异步加载的，不同的导航顺序可能会导致不同的加载顺序。我会接受这一点，因为这似乎很有道理。

<div js-buttonset>