При использовании набора кнопок jqueryUI есть ли способ определить, инициализирован ли он?

У меня есть код JQuery, который обновляет набор кнопок:

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

Но я нашел вариант использования, когда он вызывается до этой строки:

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

А потом взрыв, потому что его не инициализировано. Я хотел посмотреть, есть ли способ определить, произошла ли эта инициализация buttonset(), поэтому я могу проверить перед вызовом referh:

Что-то вроде:

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

Как правильно сделать эту проверку?

Источник

5 ответов

Решение

Рабочая скрипка.

Вы можете сделать это так же, как вы описали в своем OP, добавив новый метод buttonsetIsInitialized() к объекту jQuery:

$.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>

Источник

Другой способ - использовать метод экземпляра фабрики виджетов пользовательского интерфейса jQuery.

Получает объект экземпляра виджета. Если элемент не имеет ассоциированного экземпляра, возвращается 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>

Источник

У меня есть очень элегантное решение с использованием встроенного события buttonsetcreate кнопки В качестве альтернативы вы можете использовать событие обратного вызова кнопки. Все описано здесь https://api.jqueryui.com/buttonset/

Это событие позволит вам, когда бы ни инициировался набор кнопок, вы можете делать с ним все, что захотите. Нет необходимости проверять снова и снова, чтобы увидеть, является ли он инициатором или нет. Просто вставьте свой код в 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);
});
Источник

Я больше не использую 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');
}
Источник

Вы можете проверить, есть ли у вашего товара data() объект с именем 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);
});
<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>

Источник
Другие вопросы по тегам