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个视图使用按钮集，称之为＆＃34; A＆＃34;和＆＃34; B＆＃34;。如果我去＆＃34; A＆＃34;，刷新页面，然后导航到＆＃34; B＆＃34;它总是会发生。它从不以相反的顺序发生，或者如果我从应用程序中的任何其他视图开始。以前，如果我重新创建它然后导航回＆＃34; A＆＃34;就不会发生，但现在我将它重构为指令，如果我在＆＃34; A＆＃34;刷新，我看到正确的按钮设置，转到＆＃34; B＆＃34;，我看到搞砸的版本，然后导航到＆＃34; A＆＃34;而且我也看到了那里的混乱，它也影响了第二个按钮设置在＆＃34; A＆＃34;这不是指令的一部分。

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

Answer 1

最好的选择是从jQuery UI buttonset组件中创建一个指令。当你的UI元素是viisble时，你的组件很可能很好地加载，当它不是时，它就会失败。

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

Answer 2

尝试制作一个指令，用于与您的网页发布角度链接（jsbin上的示例）

指令：

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

并在按钮容器中使用该指令：

<div js-buttonset>

Answer 3

在没有找到解决方案的情况下，大约一天，我已经完全解决了这个问题。

在我的例子中，问题是使用Bootstrap。

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

解决方案（真的非常简单，就像找不到!!!）只是改变页面上的包含顺序：Bootstrap.js首先然后jquery-ui...js。

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

对于更稳固的解决方案，使用JQuery UI Bridge或put Bootstrap in no conflict mode可能很有用（但我目前尚未测试这些解决方案，如果我99％确定他们会解决问题）。

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

jQuery UI Buttonset不向子元素添加类

3 个答案: