删除输入字段上的 onKeyup 事件处理程序

Question

我在 opencart 的管理面板上有一个表格，可以计算产品总成本并分解成本。

我有 3 个可编辑字段和一个总计字段。

所有输入都计算出来了onKeyUp （这是由另一个开发人员构建的）。

我已经制作了一些按钮，可以用数据自动填充字段，但它的编码方式是onKeyUp，现在这意味着如果我点击我的按钮来自动填充数据，我仍然需要点击进入一个字段并按任意按钮（通常是 Enter）以更新总字段。

是否有一个事件句柄可以即时计算，删除onKeyUp 函数并计算总数，这样我按下按钮后就不需要点击框了吗？

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form);" type="text" name="cost" value="<?php echo $cost; ?>" style="text-align:right; background-color: #ffd7d7; border: thin solid #999;" /></td>
    <td width="40" align="center" nowrap="nowrap">=</td>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form); if(!this.value) this.value=0; totalcost(this.form);" id="cog" type="text" name="cost_amount" value="<?php echo $cost_amount; ?>" style="border: thin solid #999;" /></td>
    <td width="50" align="center" nowrap="nowrap"><?php echo $text_cost_or; ?></td>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form); if(!this.value) this.value=0; totalcost(this.form);" id="perc" type="text" name="cost_percentage" maxlength="5" value="<?php echo $cost_percentage; ?>" style="border: thin solid #999;" />%</td>
    <td width="40" align="center" nowrap="nowrap">+</td>
    <td nowrap="nowrap"><input onKeyUp="totalcost(this.form); if(!this.value) this.value=0; totalcost(this.form);" id="podf" type="text" name="cost_additional" value="<?php echo $cost_additional; ?>" style="border: thin solid #999;" /></td>
    <td width="40" align="center" nowrap="nowrap">+</td>
    <td nowrap="nowrap" align="left"><div id="tabs"><a href="#tab-option"><?php echo $text_cost_option_cost; ?></a></div></td>    
  </tr>
  <tr>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost; ?></span></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost_amount; ?></span></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost_percentage; ?></span></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><span class="help"><?php echo $text_cost_additional; ?></span></td>
    <td>&nbsp;</td>
    <td align="left" nowrap="nowrap"><span class="help"><?php echo $text_cost_option; ?></span></td>    
  </tr>

  <tr>
    <td>
        <input type="button" value="POD" id="pod" />
        <input type="button" value="STK" id="stk" />

        <script>
            $(function () {
            $('#pod').on('click', function () {
                var text = $('#perc');
                text.val(0); 
                var text = $('#cog');
                text.val(1.55);   
                var text = $('#podf');
                text.val(3.10);    
            });

            $('#stk').on('click', function () {
                var text = $('#perc');
                text.val(15); 
                var text = $('#cog');
                text.val(0);  
                var text = $('#podf');
                text.val(0);    
            });

             

        });

        </script>

    </td>
  </tr>

  
  </table>

Answer 1

您的代码中需要的只是在单击按钮后设置值后调用totalcost() 函数。假设您的 <form> 有一个 ID form，那么您可以这样做：

<script type="text/javascript">
    $(function () {
        $('#pod').on('click', function () {
            var text = $('#perc');
            text.val(0);
            var text = $('#cog');
            text.val(1.55);
            var text = $('#podf');
            text.val(3.10);

            totalcost($('#form'));
        });

        $('#stk').on('click', function () {
            var text = $('#perc');
            text.val(15);
            var text = $('#cog');
            text.val(0);
            var text = $('#podf');
            text.val(0);
            text.val(3.10);

            totalcost($('#form'));
        });
    });
</script>

注意添加了对totalcost() 的调用，我在其中传递了<form id="form"> 选择器。如果您的表单具有不同的 ID（或根本没有 ID），请确保调整选择器（或 <form>）。