Question

我在我的html页面中嵌入了一个jquery，该jquery使用cgstPct字段和price字段的值，并在cgstPct字段的更改事件中计算最终金额的值。在网页上，此操作无效。

我尝试在jsfiddle上运行，并且在那里工作，因此我认为在HTML文件中使用它的方式可能存在问题。

<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <title>Create Product</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        $('#cgstPct').change(function() {
            var pct = parseFloat($(this).val());
            var price = parseFloat($('#price').val());
            var total = (price) * (pct/100);
            $('#finalAmount').val(total.toFixed(2));
        });
        </script>
    </head>
    <body>
        <div layout:fragment="content" class="row">
            <div class="col-xs-8 col-md-8">
                <h3>
                    <a href="/product" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-list"></span> Product</a>
                </h3>
                <h2>Create Product</h2>
                <form action="/save">
                    <div class="form-group">
                        <label for="email">Product Name:</label>
                        <input type="text" class="form-control" name="prodName" />
                    </div>
                    <div class="form-group">
                        <label for="email">Product Description</label>
                        <textarea class="form-control" name="prodDesc" cols="60" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="email">Product Price</label>
                        <input type="number" id="price" class="form-control" name="prodPrice" />

                    <label for="cgstPct">CGST PCT</label>
                    <input type="number" id="cgstPct" class="form-control" name="cgstPct" />

                    <label for="finalAmount">Amount after GST</label>
                    <input type="number" readonly="readonly" id="finalAmount" class="form-control" name="finalAmount" />

                    <button type="submit" class="btn btn-success">Save</button>
                </form>
            </div>
        </div>
    </body>
</html>

Answer 1

您不能在具有src的脚本标签中包含代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
  $('#cgstPct').change(function() {
    var pct = parseFloat($(this).val());
    var price = parseFloat($('#price').val());
    var total = (price) * (pct/100);
    $('#finalAmount').val(total.toFixed(2));
  });
</script>

应该是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
  $('#cgstPct').change(function() {
    var pct = parseFloat($(this).val());
    var price = parseFloat($('#price').val());
    var total = (price) * (pct/100);
    $('#finalAmount').val(total.toFixed(2));
  });
</script>

Answer 2

我认为您忘记给代码添加脚本标记。请按照以下说明更改代码结构。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
        $('#cgstPct').change(function() {
            var pct = parseFloat($(this).val());
            var price = parseFloat($('#price').val());
            var total = (price) * (pct/100);
            $('#finalAmount').val(total.toFixed(2));
        });
 </script>

为了更好的实践，请始终在 body标签的底部编写您的jquery或javascript代码。这可能会解决您的问题。谢谢：）

嵌入式jquery脚本未使用html执行

2 个答案: