Кнопка Group use Функция изменения JQuery

Question

У меня есть группа кнопок с функцией 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(...) 
}); 

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

Answer 1

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

Answer 2

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

См 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>