javascript - 通过 Ajax (Wordpress) 加载内容后让 javascript 工作

Question

我在通过 Ajax 加载内容时遇到一些问题。当我通过 Ajax 加载产品时，我无法让 Woocommerce javascript 工作。

内容加载如下:

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(){} );

等等...