Question

我有jQuery代码刷新按钮集：

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

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

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

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

类似的东西：

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

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

Answer 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>

Answer 2

您可以检查您的商品是否包含名为data()的{{1}}对象商品：

uiButtonset

然后将其用作

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);
});

Answer 3

我不再使用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');
}

Answer 4

另一种方法是使用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>

Answer 5

我使用buttonset的内置事件buttonsetcreate提供了一个非常优雅的解决方案。或者，您可以使用buttonset的回调事件。这里描述的都是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);
});

使用jqueryUI buttonset时，无论如何都要确定它是否已初始化？

5 个答案: