更改文本框格式时，Javascript 代码不会运行

Question

嗨，我正在使用下面的 java 脚本代码在 asp grid-view 中进行一些计算

如果我在网格视图中更改文本框格式，代码将不会运行

例如

<ItemTemplate>
<asp:TextBox ID="txtCalcCommision" TextMode="Number" placeholder="Eenter Commision" runat="server" CssClass="form-control"  ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>

除了代码运行完美

javascript 代码

<script type="text/javascript">

    $(document).ready(function () {

        $("[id*=GvProducts]input[type=text][id*=txtCalc]").on('keyup', (function (e) {

            var Costprice = $(this).closest('tr').find("input[type=text][id*=txtCalcCostPrice]").val();
            var quantity = $(e.target).closest('tr').find("input[type=text][id*=txtCalcQuantity]").val();
            var Commision = $(this).closest('tr').find("input[type=text][id*=txtCalcCommision]").val();
            var getunitprice = (parseFloat(Commision / 100 * Costprice)) + parseFloat(Costprice);
            var total = getunitprice * quantity;
            $(e.target).closest('tr').find("[id*=lblunitprice]").text(getunitprice);
            $(e.target).closest('tr').find("[id*=lblTotal]").text(total);
            GrossTotal();
        }));

    });

    var gross;

    function GrossTotal() {

        gross = 0;

        $("[id*=GvProducts][id*=lblTotal]").each(function (index, item) {
            gross = gross + parseInt($(item).text());
        });
        $("[id*=lblGrandTotal]").text(gross);
    }
</script>

Answer 1

将ClientIDMode="Static" 添加到文本框中。 ASP.NET 将在呈现页面时更改 ID，除非您将 ClientIDMode 设置为“Static”。

您是否尝试过在 keyup 函数中添加 debugger; 行？它可能已经上线，但函数中的代码运行不正常。

[id*=GvProducts] 这不包含在您提供的 HTML 中。我真的不知道这是否会影响 CSS 选择器找到您的文本框控件。

<ItemTemplate> 假设这是来自中继器...在这种情况下，您最好使用$("input.form-control") 来找到您的控件。当 ID 在中继器中时，ASP.NET 会做很多事情来唯一化 ID。

Answer 2

选项 1：

改变：

 $("[id*=GvProducts]input[type=text][id*=txtCalc]").on('keyup', (function (e) {

到

 $("[id$=txtCalcCommision]").on('keyup', (function (e) {

由于 id 是唯一的，一个简单的以选择器结尾就可以完成这项工作。

选项 2：

由于您没有使用@Nick 提到的ClientIDMode="Static"，因此您需要获取服务器生成的ID 作为选择器ID。

$("<%=txtCalcCommision.ClientID%>").on('keyup', (function (e) {

选项 3：

将ClientIDMode="Static"添加到asp.net控件：

<asp:TextBox ID="txtCalcCommision"ClientIDMode="静态"TextMode="Number" placeholder="Eenter Commision" runat="server" CssClass="form-control" ></asp:TextBox>

$("#txtCalcCommision").on('keyup', (function (e) {