Блог

Мне нужно прослушать пользовательские события WooCommerce, такие как wc_fragment_refresched или added_to_cart . Но при создании прослушивателя для этих событий через собственный addEventListener ничего не происходит. Но jQuery .on() работает нормально.

Работает:

 jQuery(document.body).on('wc_fragments_refreshed', function() {
  console.log("hehey!");
});
 

Не работает:

 document.body.addEventListener('wc_fragments_refreshed', function() {
  console.log("hoho!");
});
 

Кто-нибудь знает, почему собственный прослушиватель не работает?

Разница в том, что addEventListener() не прослушивает события, запускаемые jQuery. Чтобы вызвать этот обработчик событий, вам нужно использовать dispatchEvent on document.body .

Ниже приведен пример. Обратите внимание, что jQuery запускается дважды, потому что он обрабатывает оба триггера событий.

 // jQuery
$(document.body).on('wc_fragments_refreshed', function() {
  console.log("jQuery handled the event");
}).trigger('wc_fragments_refreshed');

// Native
document.body.addEventListener('wc_fragments_refreshed', function() {
  console.log("POJS handled the event");
});
document.body.dispatchEvent(new Event('wc_fragments_refreshed')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>