Группа кнопок использует функцию изменения JQuery

У меня есть группа кнопок с функцией on.click, она работает. но не с on.change.

            <div class="ui buttons">
                <button class="ui button">Value 1</button>
                <button class="ui button">Value 2</button>
                <button class="ui button">Value 3</button>
            </div>

И вот моя функция

$('.ui.button').on('click change', function(){
    alert(...)
});

Когда я использую это без щелчка, это не работает.


javascript jquery buttongroup
person Wolfgang Müller    schedule 09.08.2015    source источник
comment
и как будет запускаться событие onchange?   -  person Kristijan Iliev    schedule 09.08.2015
comment
кнопка не имеет события onchange!   -  person CyC0der    schedule 09.08.2015

Ответы (2)


arrow_upward
0
arrow_downward

Как указано в комментариях, у кнопок нет события изменения, но если вы хотите использовать что-то с событием как onclick, так и onchange, могу ли я предложить переключатель?

person Ryan Pousson    schedule 09.08.2015
comment
хорошо .. да я изменил его на радио. Я попробовал это с набором кнопок, потому что он выглядит лучше. Я работаю с семантическим пользовательским интерфейсом - person Wolfgang Müller; 10.08.2015
comment
@WolfgangMüller Вы можете стилизовать переключатели, чтобы они выглядели как кнопки, смотрите мой ответ. - person zer00ne; 07.11.2015

arrow_upward
0
arrow_downward

Вы можете стилизовать радиокнопки, чтобы они выглядели как обычные кнопки.

См. POST.

body { font: 400 16px/1.45 "Palatino Linotype"; }
.buttons {
  margin: 4px;
  float: left;
  border-radius: 12px;
  font-variant: small-caps;
}
.buttons .button {
  float: left;
  width: 70px;
  margin: 4px;
  background-color: #111;
  border-radius: 6px;
  border: 1px solid #0FF;
  overflow: auto;
}
.buttons .button span {
  text-align: center;
  font-size: 16px;
  padding: 4px 0px;
  display: block;
}
.buttons .button .check {
  position: absolute;
  top: -20px;
}
.buttons .check:checked + span {
  background-color: #0FF;
  color: #111;
  border: 1px solid #0FF;
}
.buttons .button {
  background-color: #111;
  color: #0FF;
}
<fieldset class="ui buttons">
  <label class="ui button">
    <input type="radio" class="check" name="toggle"><span>Value 1</span>
  </label>
  <label class="ui button">
    <input type="radio" class="check" name="toggle"><span>Value 2</span>
  </label>
  <label class="ui button">
    <input type="radio" class="check" name="toggle"><span>Value 3</span>
  </label>
</fieldset>

person zer00ne    schedule 07.11.2015