Woocommerce通知使自定义js不起作用

Question

我为一家woocommerce商店创建了一个简单的弹出购物车菜单。它按预期工作，除非打印出woocommerce通知。基本上在用户更新购物车后，将产品添加到购物袋，以及触发woocommerce通知打印的其他woocommerce操作。

您可以在dev site上看到问题，尝试打开右上方的购物车，并在打印出woocommerce通知后尝试相同的操作。

购物车的js非常简单，不应该是个问题：

/* This function allows the user to open and close the flyout mini cart */
$('.mini_cart_button, .close-cart').on('click', function(e) {
  $('#flyout-cart').toggleClass("open");
  e.preventDefault();
});

我正在使用标题片段并使用函数调用标记：

<?php echo lines_header_cart_btn(); ?>

这是创建标记的功能，并在添加产品时更新购物车按钮：

// Function that creates the markup for the mini cart button
function lines_header_cart_btn() {
  $button_markup = '';
  $cart_link = '#';
  $number_of_products = WC()->cart->cart_contents_count;
  $cart_subtotal = WC()->cart->subtotal;

  if ($number_of_products == 0) {
    $button_markup = '<a href="' . $cart_link . '" class="pink-btn mini_cart_button">';
    $button_markup .= $number_of_products . ' varer';
    $button_markup .= '</a>';
  } elseif ($number_of_products > 1) {
    $button_markup = '<a href="' . $cart_link . '" class="pink-btn mini_cart_button">';
    $button_markup .= $number_of_products . ' varer - kr ' . $cart_subtotal;
    $button_markup .= '</a>';
  } else {
    $button_markup = '<a href="' . $cart_link . '" class="pink-btn mini_cart_button">';
    $button_markup .= $number_of_products . ' vare - kr ' . $cart_subtotal;
    $button_markup .= '</a>';
  }
  return $button_markup;
}


// Ajaxifies lines_header_cart_btn()
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
function woocommerce_header_add_to_cart_fragment( $fragments ) {
  global $woocommerce;
  ob_start();

  echo lines_header_cart_btn();

  $fragments['a.mini_cart_button'] = ob_get_clean();
  return $fragments;
}