javascript - 如何定位页面上的每个链接和按钮？

我有一个购物车，每行包含一个表单字段和一个复选框。表单字段控制数量，如果客户想要修改订购的产品的数量，该字段可以编辑，然后复选框选择该项目，将其扔到愿望清单中或将其删除。 “添加到愿望”列表和“删除功能”与该特定问题分开。

我正在做的事情是，检测何时更改了表单，然后将页面上的每个锚标记和按钮定位为目标，因此，如果对项目进行了修改，脚本将停止单击并弹出引导模式，提醒用户购物车中的某些内容已被修改。

HTML（购物车行，通过JSTL forEach循环运行，但是标记是这样）：

<table>
<form id="shoppingCart" action="updateTheCart.action">
     <c:forEach var="item" items="${shoppingCart.items}" varStatus="status">
          <tr class="cart-row">
               <td class="remove" data-label="Remove">
                    <label>
                         <input type="checkbox" name="removeFlag(<c:out value="${status.count}"/>)" value="true"/>
                    </label>
               </td>
               <td class="title" data-label="Title">
                    ${item.value.sellableGood.name}
               </td>
               <td class="qty" data-label="Quantity">
                    <input type="num" class="form-control qty-input" name="quantity(<c:out value="${status.count}" />)" value="<c:out value="${item.value.quantity}" />"/>
               </td>
               <td class="subtotal" data-label="Line Total">
                    <fmt:formatNumber type="currency" pattern="$#,##0.00" value="${item.value.itemExtendedTotal}" />
               </td>
          </tr>
     </c:foreach>
</table>

<p><a href="checkout.action" id="checkout">Checkout</a></p>
<p><button type="submit" id="checkout">Update Cart</button></p>
<p><button id="addToWishlist" type="submit" id="wish-list">Add To Wish List</button></p>
<p><a href="/" id="shop-more">Chontinue Shopping</a></p>
</form>

JS：

$("#shoppingCart :input").change(function() {
     $("#shoppingCart").data("changed",true);
});

我知道我错过了很多，但我真的不知道从哪里开始。

最佳答案

您可以尝试onbeforeunload Event

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});