jQuery更改事件，jQuery中表单序列化的问题

Question

我正在做一个网上商店的购物篮/购物车。

我想要完成的是更新客户在购物车概述页面上所做的数量或变体选择的更改。

现在用jQuery来做这件事，我正在尝试在选择器上使用change()事件:.cartItem输入，.cartItem选择

篮子概述当前在表中每个tr/行列出一个项目。我当时在想，为了使serialize()成为可能，我需要为每个项目都有一个form

我应用了一种形式，在<tr>之前打开<form class="cartItem">，在</tr>之后关闭</form>。下面是我的代码，完全理解:http://jsfiddle.net/g2Pmu/1/

但是它不起作用。我想错了吗?

目前我的代码有两个错误:

1. jQuery doesnt set change event on .cartItem input?
2. jQuery cannot serialize the .cartItem form?

我正在寻找的关于变化的成功序列化是:

co_product=78&co_variant=M&co_qty=3

为什么jQuery不认为我的形式是一个有效的形式序列化，我怎么能以适当的方式解决这个问题?

Answer 1

问题似乎是你的标记结构，这是一个无效的标记，因为这个:

 <tbody>
    <form class="cartItem">
    <input type="hidden" name="co_product" value="78" />
    <tr>

不能在<tbody>和<tr>之间有表单

您可以遵循有效的标记结构，如:

<form class="cartItem">
   <input type="hidden" name="co_product" value="78" />
   <table>
       // all the form elems
   </table>
</form>

---

Demo更新

---

或者您可以使用单个表单，并将所有隐藏的输入放在trs可用的任何tds中，如下所示:

<form class="cartItem">
<table class="table table-bordered tbl-cart">
    <thead>
        <tr>
            <td>Product Name</td>
            <td>Variant</td>
            <td class="td-qty">Quantity</td>
            <td>Unit Price</td>
            <td>Sub Total</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><!--put the hidden input here-->
                <input type="hidden" name="co_product" value="78" /> <a href="/p/nike-airmax-10">Nike AirMax 1.0</a>
            </td>
            <td>
                <select name="co_variant" class="item-variant">
                    <option value="S" selected="selected">S</option>
                    <option value="M">M</option>
                </select>
            </td>
            <td>
                <input type="number" name="co_qty" value="2" class="item-qty form-control text-center" />
            </td>
            <td class="price_unit">249,00 SEK</td>
            <td class="price_display">498,00 SEK</td>
        </tr>
        <tr>
            <td><!--and here-->
                <input type="hidden" name="co_product" value="77" /><a href="/p/46-jedi-morgonrock">Nike Pinky</a>
            </td>
            <td>
                <select name="co_variant" class="item-variant">
                    <option value="S" selected="selected">S</option>
                    <option value="M">M</option>
                </select>
            </td>
            <td>
                <input type="number" name="co_qty" value="1" class="item-qty form-control text-center" />
            </td>
            <td class="price_unit">499,00 SEK</td>
            <td class="price_display">499,00 SEK</td>
        </tr>
        <tr>
            <td colspan="4" align="right">Total</td>
            <td class="total" colspan="2"><b>997,00 SEK</b>
            </td>
        </tr>
    </tbody>
</table>
</form>

你可以试着修改一下你的jQuery，像这样:

$(document).ready(function () {
    $('.cartItem input, select').change(function () {
       var me = $(this);
       var form = $(me).closest('tr').find(':input').serialize();
       alert(form);
       return false;
    });
});

更新到这一行:

$(me).closest('tr').find(':input').serialize();

---

另一个小提琴