title: Run function every time event fires
body: <p>I am trying to disable the 'Proceed to Checkout' button when the cart quantities are changed. To do this, Im using jQuery to inject some CSS to the proceed button (see below).</p>
  
  <p>The code I am currently using works but it only works for the first time the cart is updated. If the user then edits their cart for a seconds time, the priced to checkout button stays active.</p>
  
  <p>The tricky part to this was targeting the correct elements as is seems as though the IDs are dynamically created by WooCommerce so they change each time the page is loaded.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Disable proceed button
   $( ".product-quantity &gt; .quantity &gt; input" ).change( function() {
    $( 'a.checkout-button' ).css({
     'pointer-events': 'none',
     'opacity': '0.25'
    });
   });
  
   $( '.actions &gt; input[type="submit"]' ).click( function() {
    $( 'a.checkout-button' ).css({
     'pointer-events': 'auto',
     'opacity': '1'
    });
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="product-remove"&gt;&amp;nbsp;&lt;/th&gt;
        &lt;th class="product-thumbnail"&gt;&amp;nbsp;&lt;/th&gt;
        &lt;th class="product-name"&gt;Product&lt;/th&gt;
        &lt;th class="product-price"&gt;Price&lt;/th&gt;
        &lt;th class="product-quantity"&gt;Quantity&lt;/th&gt;
        &lt;th class="product-subtotal"&gt;Total&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="woocommerce-cart-form__cart-item cart_item"&gt;
        &lt;td class="product-remove"&gt;
          &lt;a href="http://mowgli.dev/basket/?remove_item=0039818e7547d3314205171d9ec650da&amp;amp;_wpnonce=09541aba5e" class="remove" aria-label="Remove this item" data-product_id="166" data-product_sku=""&gt;×&lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="product-thumbnail"&gt;
          &lt;a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00"&gt;
            &lt;img src="//mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-180x180.png" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-180x180.png 180w, //mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-150x150.png 150w, //mowgli.dev/wp-content/uploads/2017/09/PR-Gift-Card-300x300.png 300w" sizes="(max-width: 180px) 100vw, 180px" width="180" height="180"&gt;
          &lt;/a&gt;
        &lt;/td&gt;
        &lt;td class="product-name" data-title="Product"&gt;
          &lt;a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00"&gt;Gift Cards - £100.00&lt;/a&gt;     &lt;/td&gt;
        &lt;td class="product-price" data-title="Price"&gt;
          &lt;span class="woocommerce-Price-amount amount"&gt;&lt;span class="woocommerce-Price-currencySymbol"&gt;£&lt;/span&gt;100.00&lt;/span&gt;    &lt;/td&gt;
        &lt;td class="product-quantity" data-title="Quantity"&gt;
          &lt;div class="quantity"&gt;
            &lt;label class="screen-reader-text" for="quantity_59f058ed51782"&gt;Quantity&lt;/label&gt;
            &lt;input id="quantity_59f058ed51782" class="input-text qty text" step="1" min="0" max="" name="cart[0039818e7547d3314205171d9ec650da][qty]" value="21" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" type="number"&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td class="product-subtotal" data-title="Total"&gt;
          &lt;span class="woocommerce-Price-amount amount"&gt;&lt;span class="woocommerce-Price-currencySymbol"&gt;£&lt;/span&gt;2,100.00&lt;/span&gt;   &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td colspan="6" class="actions"&gt;
        &lt;input class="button" name="update_cart" value="Update basket" disabled="" type="submit"&gt;
        &lt;input id="_wpnonce" name="_wpnonce" value="09541aba5e" type="hidden"&gt;&lt;input name="_wp_http_referer" value="/basket/" type="hidden"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div class="wc-proceed-to-checkout"&gt;
    &lt;a href="http://mowgli.dev/checkout/" class="checkout-button button alt wc-forward"&gt;
  Proceed to checkout&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have already checked the following posts on SO which haven't really helped me:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/6124011/how-to-execute-a-function-every-time-the-content-is-changed-in-an-input-field-us">How to execute a function every time the content is changed in an
  input field using JQuery?</a></li>
  <li><a href="https://stackoverflow.com/questions/17202668/execute-jquery-every-time-a-specific-function-runs">Execute Jquery every time a specific function runs</a></li>
  <li><a href="https://stackoverflow.com/questions/17202346/do-something-when-function-executes-jquery">do something when function executes Jquery</a></li>
  </ul>