javascript - jQuery UI Buttonset 不向子元素添加类

Question

我在使用 jQuery UI 的按钮集功能时遇到了(间歇性的)问题。有时当我调用它时，它只应用它添加到容器 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 个使用按钮集的 View ，称它们为“A”和“B”。如果我转到“A”，刷新页面，然后导航到“B”，它总是会发生。它永远不会以相反的顺序发生，或者如果我从应用程序中的任何其他 View 开始。以前，如果我重新创建它然后导航回“A”就不会发生这种情况，但现在我将它重构为一个指令，如果我在“A”刷新，我会看到正确的按钮集，转到“B”，我看到乱七八糟的版本，然后导航到“A”，我在那里也看到了乱七八糟的版本，它还会影响设置在“A”上的第二个按钮，这不是指令的一部分。

我尝试在 JS Fiddle 中重新创建一个基本示例，其中包含两个使用按钮集的 View ，但这不足以重新创建错误。

Answer 1

对您来说最好的选择是从您的 jQuery UI 按钮集组件中创建一个指令。您的组件很可能在其 UI 元素可见时加载良好，而在不可见时加载失败。

另一种选择是在加载新 View 后立即调用 jQuery init 函数，这样可以确保在尝试初始化按钮集时它是可见的。