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

问题描述：

我有一个购物车，每行都包含一个表单域和一个复选框。如果客户想要修改他们订购的产品的数量，表单字段控制可以编辑的数量，并且该复选框选择该项目，或者将项目扔在愿望清单中或者将其移除。 “添加到希望”列表和“删除功能”从这个特定问题中分离出来。如何定位页面上的每个链接和按钮？

什么，我正在查看，正在检测何时已更改窗体，然后针对页面上的每个锚定标记和按钮，所以如果项目已被修改，脚本停止点击并弹出引导模式，提醒用户他们购物车中的东西已被修改。

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'事件做同样的事情。 – Whothehellisthat

'$（document）.on（'click'，'a，button'，function（event）{/ * Your stuff * /}）;' - http://api.jquery.com/on/ – GolezTrol

答

的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) {})

答

你可以尝试onbeforeunload Event

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

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

相关推荐