使用 jqueryUI 按钮集时，无论如何确定它是否已被初始化？答案

【问题标题】：When using jqueryUI buttonset, is there anyway to determine if it has been initialized?使用 jqueryUI 按钮集时，无论如何确定它是否已被初始化？
【发布时间】：2016-11-30 19:32:09
【问题描述】：

我有刷新按钮集的 jQuery 代码：

$("#myRadio").buttonset('refresh');

但我发现了一个在此行之前调用它的用例：

$("#myRadio").buttonset();

然后因为它没有初始化而爆炸。我想看看是否有办法确定这个 buttonset() 初始化是否已经发生，所以我可以在调用 referh 之前检查：

类似：

if($("#myRadio").buttonsetIsInitialized())
{
    $("#myRadio").buttonset('refresh');
}

进行此检查的正确方法是什么？

【问题讨论】：

相关，可能重复：stackoverflow.com/questions/1505270/…
这是插件初始化的常见问题，但解决方案不是测试它是否已初始化，而是首先找出您的排序错误的原因。请提供更多代码以获得正确答案（而不是解决方法）:)

标签： jquery jquery-ui jqueryi-ui-buttonset

【解决方案1】：

Working fiddle.

您可以通过向 jQuery 对象添加新方法 buttonsetIsInitialized() 来按照您在 OP 中描述的方式执行此操作：

$.fn.buttonsetIsInitialized = function () {
    return this.hasClass('ui-buttonset');
};

此方法将检查类ui-buttonset（即实例化添加到元素）是否存在于元素类列表中。

if($("#myRadio").buttonsetIsInitialized()){
    $("#myRadio").buttonset('refresh');
}

希望这会有所帮助。

未初始化的情况：

$.fn.buttonsetIsInitialized = function () {
  return this.hasClass('ui-buttonset');
};

if( $("#myRadio").buttonsetIsInitialized() ){
  console.log('Refresh element');
}else{
  console.log('Not initialized');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet"/>


<div id="myRadio">
  <input id="first" type="radio" value="1" name="steps"/><label for="first">First</label>
  <input id="second" type="radio" value="2" name="steps"/><label for="second">Second</label>
</div>

初始化案例：

$('#myRadio').buttonset(); //Initilized

$.fn.buttonsetIsInitialized = function () {
  return this.hasClass('ui-buttonset');
};

if( $("#myRadio").buttonsetIsInitialized() ){
  console.log('refresh element');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="myRadio">
  <input id="first" type="radio" value="1" name="steps"/><label for="first">First</label>
  <input id="second" type="radio" value="2" name="steps"/><label for="second">Second</label>
</div>

【讨论】：

这不是你要找的答案@leora 吗？

【解决方案2】：

我不再使用 jquery ui - 我搬到了 jquery mobile 但我希望我能提供帮助...

重要提示：我假设您已经知道 buttonset 已被弃用？

来自http://api.jqueryui.com/buttonset/

此小部件已弃用，请改用Controlgroup。

如果强制继续使用buttonset，则http://api.jqueryui.com/buttonset/ 引用类“ui-buttonset”。基本上，我会寻找这个类是否存在或不存在于您的选择器周围的某个地方。如果做不到这一点，我会检查设置了哪些类前/后按钮集，并将其用作参考。

抱歉，我无法提供更准确的建议解决方案。

if( ! $("#myRadio").parent().find("ui-buttonset") )
{
    $("#myRadio").buttonset('refresh');
}

【讨论】：

【解决方案3】：

另一种方法是使用jQuery ui 小部件工厂的instance method。

检索小部件的实例对象。如果元素没有关联的实例，则返回 undefined。

这是一个例子：

$(function() {
  $('#button-group-initiated').buttonset();

  console.log(
    "Button set one instanced? > " + $('#button-group-initiated').buttonset("instance")
  )

  console.log(
    "Button set two instanced? > " + $('#button-group-woot').buttonset("instance")
  )
});

body > div:nth-of-type(2) {
  margin-top: 20px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  <div id="button-group-initiated">
    <input type="radio" id="sizzle" name="project">
    <label for="sizzle">Sizzle</label>

    <input type="radio" id="qunit" name="project" checked="checked">
    <label for="qunit">QUnit</label>

    <input type="radio" id="color" name="project">
    <label for="color">Color</label>
  </div>
</div>

<div>
  <div id="button-group-woot">
    <input type="radio" id="sizzle2" name="project2">
    <label for="sizzle2">Sizzle</label>

    <input type="radio" id="qunit2" name="project2" checked="checked">
    <label for="qunit2">QUnit</label>

    <input type="radio" id="color2" name="project2">
    <label for="color2">Color</label>
  </div>
</div>

【讨论】：

【解决方案4】：

我有一个非常优雅的解决方案，使用按钮集的内置事件buttonsetcreate。或者，您可以使用按钮集的回调事件。这里都描述了https://api.jqueryui.com/buttonset/#event-create

这个事件将允许你在按钮集启动时，你可以用它做任何你想做的事情。无需一次又一次地检查它是否是 init 。只需将您的代码放入event 即可完成。

小提琴

https://jsfiddle.net/ergec/wk9ew1bp/

html

<fieldset>
    <legend>Favorite jQuery Project</legend>
    <div id="radio">
        <input type="radio" id="sizzle" name="project">
        <label for="sizzle">Sizzle</label>

        <input type="radio" id="qunit" name="project" checked="checked">
        <label for="qunit">QUnit</label>

        <input type="radio" id="color" name="project">
        <label for="color">Color</label>
    </div>
</fieldset>
<button id="initbuttonset">Init</button>
<button id="checkbuttonset">Check</button>

js

var isbuttonsetinit = false;
$("#radio").on("buttonsetcreate", function(event, ui) {
    isbuttonsetinit = true;
    alert("buttonset init");
});
$("#initbuttonset").click(function() {
    $("#radio").buttonset();
});
$("#checkbuttonset").click(function() {
    alert(isbuttonsetinit);
});

js（替代）

var isbuttonsetinit = false;
$("#initbuttonset").click(function() {
    $("#radio").buttonset({create: function( event, ui ) {
        isbuttonsetinit = true;
        alert("buttonset init");
    }});
});
$("#checkbuttonset").click(function() {
    alert(isbuttonsetinit);
});

【讨论】：

【解决方案5】：

您可以检查您的项目是否有一个名为uiButtonset 的data() 对象项目：

function isButtonsetInitialized(item) {
    return (typeof $(item).data('uiButtonset') == 'object');
}

然后将其用作

if(isButtonsetInitialized('#myradio')) {
  $('#myradio').buttonset('refresh');
}

查看这个工作示例。

function isButtonsetInitialized(item) {
  return (typeof $(item).data('uiButtonset') == 'object');
}

$(function() {
  console.log(isButtonsetInitialized('#test_1'));
  setTimeout(function() {
    $('input[type="radio"]').button().buttonset();
    console.log(isButtonsetInitialized('#test_1'));
  }, 1000);
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link media="screen" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<input type="radio" name="test" id="test_1" value="1" />
<label for="test_1">FIRST</label>
<input type="radio" name="test" id="test_2" value="2" />
<label for="test_2">SECOND</label>
<input type="radio" name="test" id="test_3" value="3" />
<label for="test_3">THIRD</label>

【讨论】：