Button Group use JQuery change function

Question

I have a button group an with on.click function it is working. but not with 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>

And here is my function

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

When i use this without click, it's not working.

and how would onchange event be triggered? – Kristijan Iliev Aug 09 '15 at 09:13 — Kristijan Iliev, Aug 09 '15 at 09:13
button don't have onchange event! – Cyrus Raoufi Aug 09 '15 at 09:29 — Cyrus Raoufi, Aug 09 '15 at 09:29

score 0 · Answer 1 · answered Aug 09 '15 at 14:22

0

As pointed out in the comments, buttons don't have an on change event, but if you wanted to use something with both onclick and onchange events, might I suggest a radio button?

answered Aug 09 '15 at 14:22

Ryan Pousson

11
3

okay.. yes i have changed it to radio. I tried it with buttonset because it has a better look. I am working with semantic-ui – Wolfgang Müller Aug 10 '15 at 10:10
@WolfgangMüller You can style radio buttons to look like a button, see my answer. – zer00ne Nov 07 '15 at 13:12

score 0 · Answer 2 · edited May 23 '17 at 12:23

You can style radio buttons to look like a normal button.

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

Button Group use JQuery change function

2 Answers2