每次事件触发时运行功能

时间：2017-10-25 09:19:41

标签： jquery wordpress woocommerce

我正在尝试在更改购物车数量时禁用“继续结帐”按钮。为此，我使用jQuery将一些CSS注入到继续按钮（见下文）。

我目前使用的代码有效，但它只适用于首次更新购物车。如果用户随后对其购物车进行了几秒钟的编辑，那么定价到结帐按钮将保持活动状态。

这个棘手的部分是针对正确的元素，好像这些ID是由WooCommerce动态创建的，因此每次加载页面时都会更改。

// Disable proceed button
	$( ".product-quantity > .quantity > input" ).change( function() {
		$( 'a.checkout-button' ).css({
			'pointer-events': 'none',
			'opacity': '0.25'
		});
	});

	$( '.actions > input[type="submit"]' ).click( function() {
		$( 'a.checkout-button' ).css({
			'pointer-events': 'auto',
			'opacity': '1'
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
  <thead>
    <tr>
      <th class="product-remove">&nbsp;</th>
      <th class="product-thumbnail">&nbsp;</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="woocommerce-cart-form__cart-item cart_item">
      <td class="product-remove">
        <a href="http://mowgli.dev/basket/?remove_item=0039818e7547d3314205171d9ec650da&amp;_wpnonce=09541aba5e" class="remove" aria-label="Remove this item" data-product_id="166" data-product_sku="">×</a>
      </td>
      <td class="product-thumbnail">
        <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00">
          <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">
        </a>
      </td>
      <td class="product-name" data-title="Product">
        <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00">Gift Cards - £100.00</a>			  </td>
      <td class="product-price" data-title="Price">
        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>100.00</span>				</td>
      <td class="product-quantity" data-title="Quantity">
        <div class="quantity">
          <label class="screen-reader-text" for="quantity_59f058ed51782">Quantity</label>
          <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">
        </div>
      </td>
      <td class="product-subtotal" data-title="Total">
        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2,100.00</span>			</td>
    </tr>
    <tr>
    <td colspan="6" class="actions">
      <input class="button" name="update_cart" value="Update basket" disabled="" type="submit">
      <input id="_wpnonce" name="_wpnonce" value="09541aba5e" type="hidden"><input name="_wp_http_referer" value="/basket/" type="hidden">
      </td>
    </tr>
  </tbody>
</table>

<div class="wc-proceed-to-checkout">
  <a href="http://mowgli.dev/checkout/" class="checkout-button button alt wc-forward">
Proceed to checkout</a>
</div>

我已经检查了SO上的以下帖子，这些帖子对我没有帮助：

3 个答案:

答案 0 :(得分：1)

我看到当您更新购物车时，新输入来自AJAX，因此如果您想要点击事件触发，您必须使用on()，当您要点击它的元素时，文件中并非最初。 像动态生成的内容或AJAX中的新元素。 每次输入更改时，也可以禁用道具。

// Disable proceed button
$(document).on("change", '.product-quantity > .quantity > input', function() {
    $('a.checkout-button').css({
        'pointer-events': 'none',
        'opacity': '0.25'
    });
});

$(document).on("click", '.actions > input[type="submit"]', function() {
    $('a.checkout-button').css({
        'pointer-events': 'auto',
        'opacity': '1'
    });
    $(this).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
    <thead>
        <tr>
            <th class="product-remove">&nbsp;</th>
            <th class="product-thumbnail">&nbsp;</th>
            <th class="product-name">Product</th>
            <th class="product-price">Price</th>
            <th class="product-quantity">Quantity</th>
            <th class="product-subtotal">Total</th>
        </tr>
    </thead>
    <tbody>

        <tr class="woocommerce-cart-form__cart-item cart_item">

            <td class="product-remove">
                <a href="http://mowgli.dev/basket/?remove_item=0039818e7547d3314205171d9ec650da&amp;_wpnonce=09541aba5e" class="remove" aria-label="Remove this item" data-product_id="166" data-product_sku="">×</a> </td>

            <td class="product-thumbnail">
                <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00"><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">
                </a>
            </td>

            <td class="product-name" data-title="Product">
                <a href="http://mowgli.dev/product/gift-cards/?attribute_choose-value=%C2%A3100.00">Gift Cards - £100.00</a> </td>

            <td class="product-price" data-title="Price">
                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>100.00</span>
            </td>

            <td class="product-quantity" data-title="Quantity">
                <div class="quantity">
                    <label class="screen-reader-text" for="quantity_59f058ed51782">Quantity</label>
                    <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">
                </div>
            </td>

            <td class="product-subtotal" data-title="Total">
                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2,100.00</span>
            </td>
        </tr>


        <tr>
            <td colspan="6" class="actions">


                <input class="button" name="update_cart" value="Update basket" disabled="" type="submit">


                <input id="_wpnonce" name="_wpnonce" value="09541aba5e" type="hidden">
                <input name="_wp_http_referer" value="/basket/" type="hidden"> </td>
        </tr>

    </tbody>
</table>

<div class="wc-proceed-to-checkout">

    <a href="http://mowgli.dev/checkout/" class="checkout-button button alt wc-forward">
	Proceed to checkout</a>
</div>

答案 1 :(得分：0)

如果更改并点击（）绑定，您使用的名称为＆＃34; direct＆＃34;绑定只会将处理程序附加到已存在的元素。它不会受到未来创建的元素的约束。要做到这一点，你必须创建一个＆＃34;委托＆＃34;使用on（）进行绑定，如下面的代码

'$（＆＃34;按钮＆＃34）。单击（函数（）{     $（＆＃34; h2＆＃34;）。html（＆＃34;点击我

＆＃34;） }）;

$（＆＃34; .test＆＃34;）。live（＆＃39; click＆＃39;，function（）{     提醒（＆＃39;你点击了我！＆＃39;）; }）;`

答案 2 :(得分：0)

为与当前选择器匹配但

的所有元素附加事件处理程序

.live（）方法已弃用。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

此方法提供了将委托事件处理程序附加到页面的文档元素的方法，这可以在将内容动态添加到页面时简化事件处理程序的使用。有关详细信息，请参阅.on（）方法中有关直接事件与委托事件的讨论。

根据其后继者重写.live（）方法很简单;这些是用于所有三种事件附件方法的等效调用的模板：

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+
相关问题
最新问题