单击按钮时响应更改触发器处理程序

Question

JSFiddle

在以下示例中，如果手动更改文本框中的文本，则会在文本框下收到不同的消息。

如果你点击其中一个按钮(即，如果你点击设置为4的按钮(，你应该会看到Mid to Mod虚弱显示在文本输入下方。

我的HTML

<input type="text" id="total-frailty-score" value="9" />
<div id="frail-category-area">
    <div id="frail-category"></div>
</div>
<input type="button" id="a" value="Set as 4" />
<input type="button" id="b" value="Set as 2" />
<input type="button" id="c" value="Set as 7" />

JavaScript/JQuery

$(function () {
function FrailCategory() {
    if ($('#total-frailty-score').val() ==  9) {
        $('#frail-category').text('Terminally')
    } else if ($('#total-frailty-score').val() >=  1 && $('#total-frailty-score').val() <=  3) {
        $('#frail-category').text('Pre-Frail')
    } else if ($('#total-frailty-score').val() >=  4 && $('#total-frailty-score').val() <=  6) {
        $('#frail-category').text('Mid-to-Mod frail')
    } else if ($('#total-frailty-score').val() >=  7 && $('#total-frailty-score').val() <=  8) {
        $('#frail-category').text('Severely frail')
    }
}
    $('#total-frailty-score').change(FrailCategory).triggerHandler("change");
});
$('#a').click(function() {
    $('#total-frailty-score').val('4');
});
$('#b').click(function() {
    $('#total-frailty-score').val('2');
});
$('#c').click(function() {
    $('#total-frailty-score').val('7');
});

Answer 1

您可以在点击处理程序中手动触发更改事件：

$('#a').click(function() {
    $('#total-frailty-score').val('4').change();
});

尽管我建议重写所有内容：JSFiddle

Answer 2

只需从单击处理程序调用绑定到更改处理程序的同一函数：

$('#a').click(function() {
    scoreBox.val('4');
    setFrailText();
});
$('#b').click(function() {
    scoreBox.val('2');
    setFrailText();
});
$('#c').click(function() {
    scoreBox.val('7');
    setFrailText();
});

http://jsfiddle.net/AS6GB/38/

您还应该缓存jQuery对象，而不是一遍又一遍地对它们进行选择。

Answer 3

点击函数后，只需调用您的FrailCategory((。

jsfiddle

$('#a').click(function() {
    $('#total-frailty-score').val('4');
    FrailCategory() ;
});
$('#b').click(function() {
    $('#total-frailty-score').val('2');
    FrailCategory() ;
});
$('#c').click(function() {
    $('#total-frailty-score').val('7');
    FrailCategory() ;
});