lew*_*x00 8 html javascript jquery jquery-ui angularjs
我遇到了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>
Run Code Online (Sandbox Code Playgroud)
调用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>
Run Code Online (Sandbox Code Playgroud)
而不是这个:
<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>
Run Code Online (Sandbox Code Playgroud)
更新:我可以在我的应用程序中一致地重现这一点.该应用程序使用AngularJS,我有2个视图使用按钮集,称为"A"和"B".如果我转到"A",刷新页面,然后导航到"B",总会发生这种情况.它从不以相反的顺序发生,或者如果我从应用程序中的任何其他视图开始.以前,如果我重新创建它然后导航回"A"就不会发生,但现在我将它重构为指令,如果我在"A"处刷新,我看到正确的按钮设置,转到"B",我看到乱糟糟的版本,然后导航到"A",我也看到乱搞了一个,它也会影响第二个设置在"A"上的按钮,它不是指令的一部分.
我尝试在JS Fiddle中重新创建一个基本示例,其中两个视图使用buttonset,但这还不足以重新创建bug.
我已经为这个完全相同的问题伤透了大约一天的时间,但没有找到解决方案。
就我而言,问题在于 Bootstrap 的使用。
Bootstrap 还管理按钮,它使用与 Jquery UI 使用的名称相同的名称buttons
。
解决方案(真的非常简单,就像找不到一样!!!)是简单地更改页面上的包含顺序:Bootstrap.js
first 和 then jquery-ui...js
。
这个简单的事情解决了问题(即使它仍然是冲突)。
对于更可靠的解决方案,使用JQuery UI Bridge或将Bootstrap 置于无冲突模式可能有用(但我目前还没有测试这些解决方案,如果我 99% 确定它们会解决问题)。
注意:工具提示也存在同样的冲突。