在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);