Javascript jQuery：多次替换特定的跨度文本

我试图构建一个视图，其中用户有许多输入框，每个输入框都包含一个数值

我想在特定的位置显示特定div中每个输入的总数。这就是我到目前为止所做的

首先，有关的意见部分：

<div id="@Model[i].mCardID">
    @for (int j = 0; j < Model[i].mListBackstore.Count; j++)
    {
        switch (Model[i].mListBackstore[j].mBackstoreInventoryItem.InventoryItem.mItemState)
        {
            case "Near Mint":
                <div>
                    Near Mint: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue card-" + Model[i].mCardID + "", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID, @card=Model[i].mCardID } )
                </div>
                break;
            case "Almost Near Mint":
                <div>
                    Almost Near Mint: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Slightly Played":
                <div>
                    Slightly Played: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Played":
                <div>
                    Played: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Heavily Played":
                <div>
                    Heavily Played: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Damaged":
                <div>
                    Damaged: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
        }
    }
</div>

<p style="font-size: 1.2em">Total: <span class="totals totalCards-@Model[i].mCardID">0</span></p>

---

现在它正在工作，但只有一次。因此，如果我有三个盒子，或者如果我多次更改相同的输入，那么总数不再更改。有人能帮我实现我的目标吗？非常感谢

我认为您的事件绑定是错误的。与此相反：

$('.cardPackValue').on('input', function() {

这样做：

$('.cardPackValue input').on('change', function() {

---

干杯

你能把小提琴放上去吗？我的猜测是，由于服务器模板和jQuery实现之间的逻辑分歧，我们看到了一个问题。通常，最好将数据发送到客户端，然后让它生成相关的HTML。

使用knockout.js中的计算观察值，只需最少的编码即可轻松实现。

错误。。。我怎么做小提琴（我不知道怎么做。但我认为你是对的。我会做一些面向mvc的事情，这会更简单。@Michael，你认为这是一个答案吗？我想这应该在评论中section@FurquanKhan我认为，关于发送数据而不是试图分割MVC的观点是非常突出的，这是一个很好的，尽管可能是模糊的answ呃。如果Herve可以按照Edgar Villagas Alvarado（以下）的建议提供一个提琴，我希望使用这个原则使它工作。好吧，这只会使整个事情停止工作。请制作一个提琴，只需转到，添加代码，然后单击“更新”，并将新链接放在这里。您必须粘贴由c生成的HTML#

$('.cardPackValue input').on('change', function() {