Wie kann ich ALLE Links und Schaltflächen auf der Seite ausrichten?

Question

Ich habe einen Einkaufswagen, der ein Formularfeld und ein Kontrollkästchen in jeder Zeile enthält. Das Formularfeld steuert die Menge, die bearbeitet werden kann, wenn der Kunde die Menge des bestellten Produkts ändern möchte, und das Kontrollkästchen wählt den Artikel aus, um den Artikel entweder in eine Wunschliste zu werfen oder um ihn zu entfernen. Die Funktionen "Zur Wunschliste hinzufügen" und "Funktionen entfernen" sind von dieser speziellen Frage getrennt.

Was ich gerade mache, erkennt, wenn das Formular geändert wurde, und zielt dann auf JEDES Anker-Tag und Knopf auf der Seite. Wenn die Elemente geändert wurden, stoppt das Skript den Klick und erscheint ein Bootstrap-Modal, das den Benutzer darauf hinweist, dass etwas in seinem Einkaufswagen geändert wurde.

HTML(der Warenkorb Reihe, durch eine JSTL foreach-Schleife laufen, aber das Markup ist dies):

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

Ich weiß, ich Ich vermisse viel, aber ich weiß wirklich nicht, wo ich an diesem Punkt anfangen soll.

Answer 1

Javascript:

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

Die jquery entspricht:

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

das Formular für die Änderungen zu sehen, würde ich das blur Ereignis verwendet, ist es das Gegenteil von dem Fokus:

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

Jquery:

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

Answer 2

können Sie versuchen, die onbeforeunload Event

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