Question

问题背景：

我有一个带购物车的MVC4项目如图所示：

enter image description here

这使用Touchspin.js为用户提供了一种方式来更新购物车中每件商品的购物车数量。输入包含增量或减量的选择器：

enter image description here

问题：

如果用户从购物车中删除商品，我会通过ajax POST请求将指定的商品ID发送到购物车控制器上的方法，该方法又将其从购物车商品列表中删除。完成后，项目列表将返回到ajax调用的Success函数，该函数构建列表项的html行，然后将它们附加到购物车表。

问题是，当从成功调用重建购物车项目表时，我似乎丢失了Touchspin输入选择器HTML。页面最初加载时使用相同的方法。这里的图像显示格式错误的HTML输入，红色箭头表示缺少的选择器：

enter image description here

代码：

  @{
    Layout = "~/Views/Shared/MasterLayout.cshtml";
}


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery.blImageCenter.js"></script>
<script src="~/Scripts/bootstrap.touchspin.js"></script>
<script src="~/Scripts/mimity.js"></script>


    <h2>Cart</h2>
    <br />
    <table id="Table1" class="table table TableSection">
        <thead>
            <tr>
                <td style="display:none;">id</td>
                <td></td>
                <td class="TableCell"><b>Item</b></td>
                <td class="TableCell"><b>Brand</b></td>
                <td class="TableCell"><b>Unit Price</b></td>
                <td class="TableCell"><b>Quantity</b></td>
                <td></td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <input class="btn btn-success btn-block updateCart" type="button" value="Update Cart" />

    @Html.Partial("_ViewCartContents")

    <div class="PaymentButtons">
        <div class="row">

            <div class="col-sm-4">

                <input class="btn btn-success btn-block updateCart" type="button" value="PayPal" onclick="location.href='@Url.Action("Index", "PayPalExpress")'" />

            </div>
            <div class="col-sm-4 pull-left">
                <input class="btn btn-success btn-block updateCart" type="button" value="Card Payment" onclick="location.href='@Url.Action("ShippingDetails", "PayPalDirectPayment")'" />
            </div>
        </div>
    </div>
</script>

AddRows用于构建购物车商品列表中每件商品的行。这是附加到购物车表主体。

<script type="text/javascript">

    var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {

        var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
        var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
        var selectors = '<input id="demo1" type="text" value="' + productQty + '" name="demo1">';


        var $html = $('<tr class="item">' +
            '<td class="prodId" style="display:none;">' + productId + '</td>' +
            '<td class="prodImage hidden-xs">' + image + '</td>' +
            '<td class="prodName">' + productName + '</td>' +
            '<td class="prodBrand">' + productBrand + '</td>' +
            '<td class="prodPrice"> £' + productPrice + '</td>' +
            '<td class="prodQty TableCell">' + selectors + '</td>' +
            '<td>' + button + '</td>' +
            '</tr>');

        $('#Table1 > tbody:last').append($html);

    };
</script>


@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
    <script>
        var cartItemId = '@cartItem.CartItemId';
        var cartImage = '@cartItem.CartItemImage';
        var cartItemName = '@cartItem.CartItemName';
        var cartBrand = '@cartItem.CartItemBrand';
        var cartItemPrice = '@cartItem.CartItemPrice';
        var cartItemCartItemQty = '@cartItem.CartItemQty';

        AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);

    </script>
}

Delete函数用于删除指定的购物车项目，然后在Success方法中使用AddRows方法重建购物车项目。

    $(".deleteItem").click(function () {
        var $row = $(this).closest("tr");
        var $text = $row.find(".prodId").text();

        $.ajax({
            url: '@Url.Action("RemoveCartItem")',
            type: 'POST',
            data: {
                "id": $text
            },
            success: function (cartItems) {

                $('#Table1 > tbody:last').empty();

                $.each(cartItems.cartList, function (i, item) {

                    AddRows(item.CartItemId, item.CartItemImage, item.CartItemName, item.CartItemBrand, item.CartItemPrice, item.CartItemQty);

                });
            }
        });
    });
</script>

TouchSpin输入选择器设置值。

<script>
    $("input[name='demo1']").TouchSpin({
        min: 1,
        max: 100,
        step: 1,
    });
</script>

Answer 1

每次添加新的HTML内容时，都应该再次调用定义TouchSpin的JS代码。

$（NewContentSelector）。找到（＆＃34;输入[名称=＆＃39; demo1的＆＃39;]＆＃34）。TouchSpin（{ 分钟：1，最大值：100，步骤1， }）;

Answer 2

每次将Touchspin动态添加到demo1时，您必须将DOM API添加到名为Touchspin的输入元素中。

将API绑定到动态加载的内容有多种方法

方法1

在将AddRows追加到$html之前，您可以在$('#Table1 > tbody:last')函数中的demo1上调用AddRows

就像/*....Addrows funcion....*/ $html.find("input[name='demo1']").TouchSpin({ min: 1, max: 100, step: 1, }); $('#Table1 > tbody:last').append($html); };函数的结尾看起来像

Touchspin

方法2

您可以在demo1功能之后的$.each成功功能中呼叫success。因此，您的success: function (cartItems) { $('#Table1 > tbody:last').empty(); $.each(cartItems.cartList, function (i, item) { AddRows(item.CartItemId, item.CartItemImage, item.CartItemName, item.CartItemBrand, item.CartItemPrice, item.CartItemQty); }); $("input[name='demo1']").TouchSpin({ min: 1, max: 100, step: 1, }); }功能变为

$row

然而，您的代码需要重构，如注释中提到的Ste-fu，因此您可以返回1或0（或某些文本来区分某些错误或OK响应）如果回复是表示该项目已被删除的内容，则您从DOM中删除success: function (status) { if(status==1)//means that item is removed from database then $row.remove(); //remove the closest row to the clicked element }，在这种情况下，您的成功功能将变为这样

{{1}}

在ajax调用之后更新HTML表数据后输入选择器丢失

2 个答案: