Функция наблюдения от MutationObserver не выполняет функцию обратного вызова - PullRequest
Новая
       30

Функция наблюдения от MutationObserver не выполняет функцию обратного вызова

0 голосов
/ 30 сентября 2019

Я пытаюсь использовать MutationObserver впервые для прослушивания любых изменений в элементе <span> (.mphb-price) и обновить значение скрытого поля в форме, которую я смогу использовать позже.

Значение в элементе <span> изменяется плагином (бронирование гостиницы Motopress). Поскольку у меня нет документации / поддержки плагина, последнее, что я могу сделать, это выслушаю любые изменения. Однако observe каким-то образом не вызывает мою функцию обратного вызова, когда происходят какие-либо изменения.

Пожалуйста, предоставьте некоторую информацию о том, что я делаю неправильно.

Вот мой код: 

jQuery(document).ready(function($) {
  $('.mphb-total-price .mphb-price').ready(function() {
    var target = document.querySelector('.mphb-total-price .mphb-price');

    console.log('price field is ready ' + target.textContent);

    var observer = new MutationObserver(function(mutations) {
      console.log('Room rate updated');

      //record the current value of mphb-price (total cost)
      var total_cost_val = target.textContent;

      console.log('total_cost_val ' + total_cost_val);

      //update the hidden field (mphb-booking-cost)
      $('#mphb_booking_cost').attr('value', total_cost_val);
    });

    observer.observe(target, {
      childList: true,
      characterData: true,
      subtree: true
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="mphb-total-price">
  <output>Total Price: <strong class="mphb-total-price-field">
    <span class="mphb-price"><span class="mphb-currency">$</span>60</span>
  </strong></output>
</p>
...