JS trigger event when val() change

Question

Q: How to trigger event when val is changed from onkey event?

Problem: When change one input, other will change value, but don't change css.

$('.stat').val(0); $(".stat").change(function () { var val = $(this).val(); if (val > 0) { $(this).css("border", "1px solid #0f0"); } else if (val < 0) { $(this).css("border", "1px solid #f00"); } else { $(this).css("border", "1px solid #000"); } }).trigger("change"); /**/ $('.stat').keyup(function () { var val = $(this).val(); if (val > 0) { var num = Math.abs(val) * -1; } else { var num = Math.abs(val) * 1; } $('input[data-id=' + $(this).attr("data-link") + ']').val(num); });

The change event is by default only send if the user directly changes the element. This is a design decision that should prevent endless loops if you e.g. fix the value upon user input. It could also have been handled in the specs by marking, if the event was triggered by user or by code, but the decision was that those events are exclusively fired on user interaction, and you need to decide yourself if you want to fire an event yourself when you change the value. — t.niese
– t.niese, Commented Dec 17, 2013 at 15:03

iambriansreed · Accepted Answer · 2013-12-17 15:02:56Z

On this line

 $('input[data-id=' + $(this).attr("data-link") + ']').val(num);

Add .trigger("change"); to ensure the change event is triggered:

 $('input[data-id=' + $(this).attr("data-link") + ']').val(num).trigger("change");

Fiddle:

http://jsfiddle.net/6Qnbh/4/

jeremija · Accepted Answer · 2013-12-17 14:57:48Z

You need to trigger the change event after setting the value. See your updated fiddle

$(function () { $('.stat').val(0); $(".stat").change(function () { var val = $(this).val(); if (val > 0) { $(this).css("border", "1px solid #0f0"); } else if (val < 0) { $(this).css("border", "1px solid #f00"); } else { $(this).css("border", "1px solid #000"); } }).trigger("change"); /**/ $('.stat').keyup(function () { var val = $(this).val(); if (val > 0) { var num = Math.abs(val) * -1; } else { var num = Math.abs(val) * 1; } // I have added the .trigger('change') part here $('input[data-id=' + $(this).attr("data-link") + ']').val(num).trigger('change'); }); });

Anton · Accepted Answer · 2013-12-17 14:58:09Z

function test(){ $(".stat").each(function () { var val = $(this).val(); if (val > 0) { $(this).css("border", "1px solid #0f0"); } else if (val < 0) { $(this).css("border", "1px solid #f00"); } else { $(this).css("border", "1px solid #000"); } }) }

and call the function on keyup

DEMO

Trace · Accepted Answer · 2013-12-17 15:02:41Z

In your code, $(this) refers to the currently changed jQuery object. An easy solution is:

$(".stat").change(function () { var val = $(this).val(); if (val > 0) { $('.stat').css("border", "1px solid #0f0"); } else if (val < 0) { $('.stat').css("border", "1px solid #f00"); } else { $('.stat').css("border", "1px solid #000"); }

Edit: depending on what you want to happen, @Anton may have the effect you are looking for; I wasn't certain what you need.
As for the reason why the other input box doesn't change, the explanation is still the same.

Collectives™ on Stack Overflow

JS trigger event when val() change

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related