val（）更改时的JS触发事件

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.

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

$('.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);
});

Answer 1

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/

Answer 2

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');
    });
});

Answer 3

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.

Answer 4

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