我可以定义一个函数来处理在 2 个输入标签上定义的 "change keyup" 事件吗？这是个好主意吗？

Question

在 HTML 代码中，我有这两个输入字段：

<div class="col-md-7">
    <input id="variazioneUlterioreSaldoInput" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 60%">
</div>

<div class="col-md-12">
    <label for="anticipo">Anticipo:</label>
    <input id="anticipoModaleUlterioreSaldo" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 25%">
</div>

这些字段是可编辑的，当用户更改其中一个时，我必须对这两个值求和。我有一个如下所示的 jQuery 函数，当用户更改第一个输入中的值时执行该函数：

$("#variazioneUlterioreSaldoInput").bind('change keyup', function() {
    console.log("VALUE CHANGED !!!");
    // DO SOMETHING
}

我的疑问是实现我之前的要求是更好地实现 2 个不同的 jQuery 函数，每个函数定义在特定输入的 change keyup 事件上，或者我可以为 [=13 定义一个独特的函数=] 我的两个输入标签上的事件？

Answer 1

您可以将相同的事件处理程序分配给两个元素，方法是用逗号分隔它们的选择器：

$('#variazioneUlterioreSaldoInput, #anticipoModaleUlterioreSaldo').on('change keyup', function() {
    console.log("VALUE CHANGED !!!");
    // calculate the sum of values here...
});

使用此模式是一个值得遵循的好习惯，因为它符合 DRY principles。

Answer 2

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {

        $("#variazioneUlterioreSaldoInput, #anticipoModaleUlterioreSaldo").bind('change keyup', function () {
            console.log("VALUE CHANGED !!!");
            // DO SOMETHING
        });
    });
</script>
</head>

<body>

    <div class="col-md-7">
    <input id="variazioneUlterioreSaldoInput" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 60%">
</div>

<div class="col-md-12">
    <label for="anticipo">Anticipo:</label>
    <input id="anticipoModaleUlterioreSaldo" class="rightAlligned form-control" type="number" value="" min="0" step="0.01" style="width: 25%">
</div>
</body>

</html>

我可以定义一个函数来处理在 2 个输入标签上定义的 "change keyup" 事件吗？这是个好主意吗？

Can I define a single function that handle the "change keyup" event defined on 2 input tags? is it a good idea?

javascript

jquery

jquery-events