在WordPress中使用jQuery将HTML移至父级

Question

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

在PC上，一切都很棒，但是在移动设备上，主题将我的自定义移动购物车数量计数器放置在移动菜单下拉菜单中。这将使其不可见，直到您打开移动菜单。 （折叠时使用JS将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>

我在这里做错了什么？谢谢您的帮助！

Answer 1

将您的代码放入此示例的就绪函数中>

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