【问题标题】:Woocommerce TypeError: $(...).on is not a functionWoocommerce TypeError: $(...).on 不是函数
【发布时间】:2016-01-10 18:49:19
【问题描述】:

我对可变产品上的add to cart 按钮有疑问。当我通过 Firebug 查看错误时,我看到以下错误:

TypeError: $(...).on is not a function
$( document ).on( 'click', '.add_to_cart_button', function() {
Location : plugins/woocommerce/assets/js/frontend/add-to-cart.js?ver=2.1.12

Screen from FIREBUG

已编辑: 这是带有 Woocommerce 插件的 Wordpress 网站。我没有对这个文件或 jquery 做任何事情。 Page link

JS 文件:

jQuery( function( $ ) {

    // wc_add_to_cart_params is required to continue, ensure the object exists
    if ( typeof wc_add_to_cart_params === 'undefined' )
        return false;

    // Ajax add to cart
    $( document ).on( 'click', '.add_to_cart_button', function() {

        // AJAX add to cart request
        var $thisbutton = $( this );

        if ( $thisbutton.is( '.product_type_simple' ) ) {

            if ( ! $thisbutton.attr( 'data-product_id' ) )
                return true;

            $thisbutton.removeClass( 'added' );
            $thisbutton.addClass( 'loading' );

            var data = {
                action: 'woocommerce_add_to_cart',
                product_id: $thisbutton.attr( 'data-product_id' ),
                quantity: $thisbutton.attr( 'data-quantity' )
            };

            // Trigger event
            $( 'body' ).trigger( 'adding_to_cart', [ $thisbutton, data ] );

            // Ajax action
            $.post( wc_add_to_cart_params.ajax_url, data, function( response ) {

                if ( ! response )
                    return;

                var this_page = window.location.toString();

                this_page = this_page.replace( 'add-to-cart', 'added-to-cart' );

                if ( response.error && response.product_url ) {
                    window.location = response.product_url;
                    return;
                }

                // Redirect to cart option
                if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {

                    window.location = wc_add_to_cart_params.cart_url;
                    return;

                } else {

                    $thisbutton.removeClass( 'loading' );

                    fragments = response.fragments;
                    cart_hash = response.cart_hash;

                    // Block fragments class
                    if ( fragments ) {
                        $.each( fragments, function( key, value ) {
                            $( key ).addClass( 'updating' );
                        });
                    }

                    // Block widgets and fragments
                    $( '.shop_table.cart, .updating, .cart_totals' ).fadeTo( '400', '0.6' ).block({ message: null, overlayCSS: { background: 'transparent url(' + wc_add_to_cart_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6 } } );

                    // Changes button classes
                    $thisbutton.addClass( 'added' );

                    // View cart text
                    if ( ! wc_add_to_cart_params.is_cart && $thisbutton.parent().find( '.added_to_cart' ).size() === 0 ) {
                        $thisbutton.after( ' <a href="' + wc_add_to_cart_params.cart_url + '" class="added_to_cart wc-forward" title="' + 
                            wc_add_to_cart_params.i18n_view_cart + '">' + wc_add_to_cart_params.i18n_view_cart + '</a>' );
                    }

                    // Replace fragments
                    if ( fragments ) {
                        $.each( fragments, function( key, value ) {
                            $( key ).replaceWith( value );
                        });
                    }

                    // Unblock
                    $( '.widget_shopping_cart, .updating' ).stop( true ).css( 'opacity', '1' ).unblock();

                    // Cart page elements
                    $( '.shop_table.cart' ).load( this_page + ' .shop_table.cart:eq(0) > *', function() {

                        $( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).addClass( 'buttons_added' ).append( '<input type="button" value="+" id="add1" class="plus" />' ).prepend( '<input type="button" value="-" id="minus1" class="minus" />' );

                        $( '.shop_table.cart' ).stop( true ).css( 'opacity', '1' ).unblock();

                        $( 'body' ).trigger( 'cart_page_refreshed' );
                    });

                    $( '.cart_totals' ).load( this_page + ' .cart_totals:eq(0) > *', function() {
                        $( '.cart_totals' ).stop( true ).css( 'opacity', '1' ).unblock();
                    });

                    // Trigger event so themes can refresh other areas
                    $( 'body' ).trigger( 'added_to_cart', [ fragments, cart_hash ] );
                }
            });

            return false;

        }

        return true;
    });

});

谢谢。

【问题讨论】:

  • 你是否按顺序正确添加了javascript文件??
  • 嗨。这是带有 Woocommerce 电子商务插件的 wordpress 网站...我没有对 javascript 文件或 jquery 做任何事情。
  • 尝试禁用其他插件..
  • 我没有安装任何新的东西,它几天前运行良好。我不知道会发生什么。

标签: javascript wordpress variables woocommerce product


【解决方案1】:

首先检查是否缺少任何 jquery 文件并在代码中使用 jQUERY 代替 $ 并使用 noconflict .这可能会帮助您摆脱问题。您要添加哪个挂钩以在您的网站中添加 jquery。

【讨论】:

  • 您好,我在第一篇文章中添加了 JS 文件,所以我需要在文件开头添加 $.noConflict(); 吗?
  • 是的。您是否将$ 更改为jQuery 并检查您的jquery 文件是在jquery 核心文件之前还是之后加载的?
  • jQuery替换所有$
  • 好的,所以我将所有$( 替换为JQuery(,现在出现错误:` TypeError: jQuery(...).on is not a function return true;`
  • 检查你的 jquery 文件何时加载以及你的核心 jquery 文件何时加载。
猜你喜欢
  • 2013-03-18
  • 2016-08-20
  • 2018-12-10
  • 2019-01-06
  • 2016-01-05
  • 2021-01-16
  • 2020-06-29
  • 2020-06-17
  • 1970-01-01
相关资源
最近更新 更多