在WordPress中使用jQuery将HTML移动到父节点 - 关闭

Question

我正在使用WooCommerce和Divi主题创建一个WordPress网店。

在PC上，一切都很好，但在手机上，主题将我的自定义移动购物车数量计数器放在移动菜单的下拉菜单内。这使得它不可见，直到你打开移动菜单。(它使用JavaScript来添加 display:none 到父节点）。)

现在我想把购物车的数量计数器移到HTML中，使其保持可见。

这是我正在使用的代码。但由于某些原因，它没有生效。

<script type="text/javascript">
    (function() {
        $('#mobile_menu li.cart_menu').appendTo('#main-header');
    })(jQuery);
</script>

我只是想让这段代码自动启动。

我做了一些测试，这段代码确实有效，但只有在添加到购物车的动作被激活后才会启动。

<script type="text/javascript">
    (function() {
        $('body').on('added_to_cart',
                     $('#mobile_menu li.cart_menu').appendTo('#main-header');
    });
    })(jQuery);
</script>

我到底做错了什么？

更新。

这个脚本工作了。

<script type="text/javascript">
    (function($) {
        $(window).on('load', function() {
            $('#mobile_menu li.cart_menu').appendTo('#main-header');
        });
    })(jQuery);
</script>

Answer 1

把你的代码放到 ready 像这个例子一样的函数。

$(document).ready(function() {
    (function() {
        $('#mobile_menu li.cart_menu').appendTo('#main-header');
    })(jQuery);
});

Answer 2

我找到了解决办法

这个脚本是有效的。

(function($){
    $(window).on('load', function() {
        $('#mobile_menu li.cart_menu').appendTo('#main-header');
    });
})(jQuery);