jQuery UI Buttonset 不向子元素添加类答案

【问题标题】：jQuery UI Buttonset Not Adding Classes To Child ElementsjQuery UI Buttonset 不向子元素添加类
【发布时间】：2014-04-02 22:40:17
【问题描述】：

我在使用 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 个使用按钮集的视图，分别称为“A”和“B”。如果我转到“A”，刷新页面，然后导航到“B”，总是会发生这种情况。它永远不会以相反的顺序发生，或者如果我从应用程序中的任何其他视图开始。以前，如果我重新创建它然后导航回“A”，则不会发生这种情况，但现在我将它重构为指令，如果我在“A”处刷新，我会看到正确的按钮集，转到“B”，我查看混乱的版本，然后导航到“A”，我也看到了混乱的版本，它还会影响在“A”上设置的第二个按钮，该按钮不是指令的一部分。

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

【问题讨论】：

根据您的描述，我猜这些类在页面加载时加载良好，当您导航到另一个页面时，类会变得混乱，这意味着它在引用 CSS 时遇到了问题。确保全局引用 CSS。
@Dexture 我不确定我明白你在说什么。无论 CSS 本身是否可用于页面，它都应该与 JavaScript 代码添加错误的类无关。如果它添加了正确的类而不是样式化，那将是一个完全不同的问题。（此外，我们所有的 CSS 都编译到一个文件中，并作为容器页面的一部分包含在内，该页面加载视图。tl;dr 所有页面都具有所有 CSS 规则。）
也许你在所有 DOM 元素都准备好之前调用了 buttonset？我从未尝试过 Angular，也不知道它是如何工作的，但在 ember 中是可能的，并且有一些特殊的方法可以让你进行 jquery 调用。
那么这个按钮的 HTML 是在哪里定义的呢？在角度视图或指令中？进行所有转换的函数调用在哪里？这些选项是由 ng-repeat 生成的吗？因为可能发生的情况是 jQuery ui 调用在 AngularJS 渲染 DOM 元素之前触发 - 所以这就是 @GennadyDogaev 的重点。
我相信它在指令中。不幸的是，此时我不再能够访问有问题的代码（自从被问到这个问题后我已经换了工作），而且我不知道我可以检查的应用程序的任何公共部署，所以其他任何事情都只是猜测这一点。

标签： javascript jquery html angularjs jquery-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

对于更可靠的解决方案，使用JQuery UI Bridge 或put Bootstrap in no conflict mode 可能有用（但我目前还没有测试这些解决方案，如果我有 99% 的把握他们会解决问题）。

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

【讨论】：

嗯，很难确定，因为我无法检查，但我们同时使用了这两种方法，并且由于 JS 是异步加载的，因此不同的导航顺序可能会导致不同的加载顺序。我会接受这个，因为它看起来很合理。

【解决方案3】：

尝试制定指令，在您的页面上发布角度链接（jsbin 上的示例）

指令：

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

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

<div js-buttonset>

【讨论】：