.change() function does not work

Question

I am using .change() function to check for changes inside an input and give an alert if a change occurred but I must be doing something wrong cause this isn't working :

jsFiddle

$(document).ready(function() {
    var sizes = ["0", "1", "2", "3", "4", "5", "5", "6", "7"];

$("#slider").slider({
      orientation: "vertical",
      range: "min",
      animation:false,
      min: 0,
      max: 8,
      value: 0,
  slide: function(event, ui) {
      $('.convert').val(sizes[ui.value]);      
  }
});

       $('.convert').change(function(e){
           alert("works?");
       });

       $('.convert').keypress(function(e){
           alert("works?");
       });

 });

Enter text then focus out the event seems to fire, I think it doesn't fire change until you blur — Zach Leighton, Dec 11 '14 at 16:43
What do you mean not working? It is working as expected... Changing manually the value doesn't trigger change, just do `.val(sizes[ui.value]).trigger('change')` — Karl-André Gagnon, Dec 11 '14 at 16:43
It's what @ZachLeighton said: it's only fired when blured. You can change it to the keyup event. — Christian Benseler, Dec 11 '14 at 16:43
@karl Thanks, this works great, you may want to add it as an answer...I forgot to trigger the change... — Alin, Dec 11 '14 at 16:47
@Alin Wasn't sure if that was really the problem, now that i am sure, ill just mark it a duplicated! — Karl-André Gagnon, Dec 11 '14 at 16:49
@Karl, Ok, I couldn't figure out what was wrong :) Thanks again. — Alin, Dec 11 '14 at 16:52

score 1 · Answer 1 · answered Dec 11 '14 at 16:45

1

Enter text then focus out the event seems to fire, I think it doesn't fire change until you blur

Change the event to $('.convert').on('keyup', function(){ alert('foo');}); (Thanks to Chris B.)

See updated fiddle : http://jsfiddle.net/6ys3derm/2/

answered Dec 11 '14 at 16:45

Zach Leighton

1,939
14
24

Karl's pointed out my error...it's what I was looking for. +1 for the answer though. – Alin Dec 11 '14 at 16:52

score 1 · Answer 2 · answered Dec 11 '14 at 16:46

1

Hmm. Can you try this?

$('document').on('change', '.convert', function(){
  alert("it works :-)");
});

answered Dec 11 '14 at 16:46

Tobi Klostermair

195
4

Karl's pointed out my error...it's what I was looking for. +1 for the answer though. – Alin Dec 11 '14 at 16:51

score 1 · Answer 3 · answered Dec 11 '14 at 16:46

the slider has its own change event

fiddle

$(document).ready(function() {
    var sizes = ["0", "1", "2", "3", "4", "5", "5", "6", "7"];

  $("#slider").slider({
        orientation: "vertical",
        range: "min",
        animation:false,
        min: 0,
        max: 8,
        value: 0,
    slide: function(event, ui) {
        $('.convert').val(sizes[ui.value]);      
    },
      change:function(){                     //called onchange
          alert("slider changed");  
      }
  });

});

Karl's pointed out my error...it's what I was looking for. +1 for the answer though. — Alin, Dec 11 '14 at 16:53

.change() function does not work

3 Answers3