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

【问题标题】：How can I target EVERY link and button on the page?如何定位页面上的每个链接和按钮？
【发布时间】：2016-07-26 19:45:20
【问题描述】：

我有一个购物车，每行包含一个表单域和一个复选框。表单字段控制数量，如果客户想要修改他们订购的产品的数量，可以编辑数量，并且复选框选择项目，或者将项目扔到愿望清单中，或者将其删除。 Add To Wish list 和 Remove Functions 与此特定问题分开。

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

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);
});

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

【问题讨论】：

change 事件传播，您不必为每个输入添加侦听器，只需将其添加到 body。
你也可以对click事件做同样的事情。
$(document).on('click', 'a, button', function(event){ /*Your stuff */}); - api.jquery.com/on
为什么<form> 直接位于<table> 内部？桌子不是这样工作的。

标签： javascript jquery forms onchange target

【解决方案1】：

你可以试试onbeforeunload Event

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

【讨论】：

【解决方案2】：

Javascript：

;[].forEach.call(document.querySelectorAll('a, button'), function(element) {
  //do something with buttons and links, for example:
  element.setAttribute('data-changed', true')
});

jquery 等价物是：

$('a, button').each(function(element) {})

要查看表单的变化，我会使用blur 事件，它是焦点的反向：

;[].forEach.call(document.querySelectorAll('#myForm input'), function(element) {
  element.addEventListener('blur', function(event) {
    //something has changed
  })
});

jquery：

$('#myForm input').on('blur', function(event) {})

【讨论】：