为什么 oninput 函数在 JavaScript 下不起作用？

Question

我的 HTML 代码：

    <div class="form-group col-sm-12">
    <label for="input-text-help" >Select Vendor 
    </label>

    <select name="vname" class="form-control">
    <option value="">Select Vendor</option>

    <?php
    foreach($Fetchvendors as $Fetch){
                                               ?>
    <option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->name; ?> 
    </option>       
                                <?php   
                                }
                                ?>
                                </select>

                          </div>
                          <div class="form-group col-sm-12">
                            <label for="input-text-help"> Date</label>

                            <input type="text" name="date"  id="datepicker" class="form-control">

                          </div>
                            <table class="table">
                                    <i class="fa fa-plus" style="margin-left:500px;">**Add More**</i>
                                    <thead>
                                            <th>Material Name</th>
                                            <th>Quantity</th>
                                            <th>Price</th>
                                    </thead>
                                    <tbody>
                            <tr >
                                <td>
        <select name="mname[]" class="mname">                              
                <option value=""> Select Material </option>
                <?php
                foreach($FetchMateril as $Fetch){
                ?>
                <option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->mname; ?></option>      
        <?php   
        }
        ?>
        </select>
                            </td>
                                <td>
                                    <input type="text" name="qty[]" class="quanitity" id="qty" placeholder="Material Unit">
                                    <!--
                                <select name="qty[]" class="quanitity">

                                    <option>Select Quanitity</option>
                                    <?php for($i=1;$i<=50;$i++){?>
                                    <option><?php echo $i;?></option>
                                    <?php }?>
                                </select>
                                -->
                                </td>
                                <td>
    <input type="text" name="price[]" class="price" id="**price**" *oninput="calculate()"*>
                        <input type="text" name="Totalprice[]" id="Totalprice" >

                        &nbsp;&nbsp; </td>
                            </tr>
                            </tbody>
                            </table>
                            <div class="form-group">
                                <div class="form-group">
                                <div class="col-sm-10">
    <input type="submit" name="submit" class="btn btn-primary" id="input-text-help" style=" margin-left:300px;" >
                                </div>
                                </div>
                                </form>
                            </div>
                </div>

在我的 html 代码中有一个选项可以为多个插入添加更多行，当我单击添加更多选项时，它会通过 javascript 添加一行。在我的输入标签价格 oninput 调用计算函数，其中计算函数计算两个输入字段并在第三个字段中返回。

它在第一行工作，但在第二行总价格不起作用意味着计算不在第三个字段中返回任何值。

我的问题可以oninput="calculate()"在JavaScript下像

我点击添加更多选项时的代码

    <script>
        $(document).ready(function(){
            //alert();
             var i = 0;
            $(".fa-plus").click(function(){
                $(".table").append('<tr><td><select name="mname[]" 
    class="mname"><option>Select Material</option><?php foreach($FetchMateril as 
    $Fetch){?><option value="<?php echo $Fetch->id;?>"><?php echo $Fetch- 
    >mname;?></option><?php }?></select></td><td><input type="text" name="qty[]" 
    ></td><td><input type="text" name="price[]" class="price" value=""></td> 
    </tr>');

            i++;
            });
        });
    </script>

我的计算功能

    function calculate() {
    var myBox1 = document.getElementById('qty').value; 
    var myBox2 = document.getElementById('price').value;
    var result = document.getElementById('Totalprice'); 

    var myResult = myBox1 * myBox2;
    //alert(myResult);
    document.getElementById('Totalprice').value = myResult;

    }

Answer 1

今年五月试试，这对你有帮助

$('#price').on('keyup', function(){
   var myBox1 = document.getElementById('qty').value; 
   var myBox2 = document.getElementById('price').value;
   var result = document.getElementById('Totalprice'); 
   var myResult = myBox1 * myBox2;
   document.getElementById('Totalprice').value = myResult;
});