Начало работы JavaScript после загрузки контента через Ajax (Wordpress)

Question

У меня проблемы с загрузкой контента через Ajax.Я не могу заставить работать Javascript Woocommerce при загрузке продукта через Ajax.

Содержимое загружается следующим образом:

App.js

$.post( settings.ajaxurl, data, function( response ) {
        $button.prop("disabled",false);
        if(true === response.success) {
            $('.sidebar').html(response.data);
        }  else {
            $contentWrapper.find('.response').html(response.data.general).show();
        }
    } );

И серверная часть возвращает часть шаблона, когда запрос был успешным.

Ajax.php

ob_start();
    if( get_user_meta( $user->ID, 'my_custom_field', true ) == 1 ) {
        get_template_part( 'template-parts/book' );
    } else {
        get_template_part( 'template-parts/additional-information' );
    }
    $response = ob_get_clean();
    wp_send_json_success( $response );

Внутри части шаблона "книга"это отдельный продукт, который можно забронировать (через Woocommerce Bookings), для работы которого требуется некоторый javascript для выбора времени / даты и т. д. Когда эта часть шаблона загружается через Ajax, javascript не работает, и поэтому я не могу забронировать продукт.

Однако, если я обновлю страницу, продукт, который можно заказать, будет загружен мгновенно без Ajax, и теперь все работает отлично.

Javascript включен глобально в заголовок страницы и присутствует всегда.Но когда новый контент загружается через Ajax, я думаю, мне нужно вручную запустить любые функции document.ready, необходимые для работы формы бронирования.

Я просто не могу обернуть голову, как я должен это сделать, поэтому любая помощь очень ценится.

Answer 1

Полагаю, вам следует динамически использовать события jquery, поскольку DOM был изменен.

Попробуйте использовать:

$(document).on( eventName, selector, function(){} );

вместо:

$(selector).on( eventName, function(){} );

ии т.д ...