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

Question

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

内容是这样加载的：

应用程序.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 );

Inside the template part "book" is a single bookable product (via Woocommerce Bookings) which requires some javascript to work for selecting time/date etc. When this template part is loaded via Ajax the javascript is not working, and I can therefore not book产品。

但是，如果我刷新页面，可预订的产品将在没有 Ajax 的情况下立即加载，现在一切正常。

javascript 全局包含在页面的 header 中，并且始终存在。 但是当通过 Ajax 加载新内容时，我想我需要手动触发预订表单工作所需的任何 document.ready 函数。

我只是不知道该怎么做，所以非常感谢任何帮助。

Answer 1

我想您应该动态使用您的 jquery 事件，因为您的 DOM 已更改。

尝试使用：

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

代替：

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

等等...