自定义Wordpress插件：无法读取null的属性'parentElement'

Question

我正在使用的库称为hotel-datepicker。在使用纯HTML和Javascript在本地计算机上成功设置插件后，一切正常。但是在将所有功能实现到自定义WordPress插件中后，出现以下错误：

Uncaught TypeError: Cannot read property 'parentElement' of null at HotelDatepicker.init (hotel-datepicker.js?ver=5.1.3:196) at new HotelDatepicker (hotel-datepicker.js?ver=5.1.3:70) at main.js?ver=5.1.3:33 at main.js?ver=5.1.3:76

我已经将Hotel Datepicker的初始化放入类似document.ready的函数中。

项目URL：http://alpensonne.printmedia-agentur.de/酒店日期选择器：https://github.com/benitolopez/hotel-datepicker

插入主要源代码：

function input_fields( $atts ) {
    if ( isset( $_POST['gg'] ) ) {
        $post = array(
            'post_content' => $_POST['content'], 
            'post_title'   => $_POST['title']
        );
        $id = wp_insert_post( $post, $wp_error );
    }
    ?> 
    <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col-12 col-md-4" id="datepicker__container">
                        <p>
                            » An- & Abreise
                            <input type="text" id="datepicker" value="">
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <?php
}

add_action('wp_enqueue_scripts','alpensonne_load_js');

function alpensonne_load_js() {
    wp_enqueue_script( 'hotel-datepicker', plugins_url( '/js/hotel-datepicker.js', __FILE__ ));
    wp_enqueue_script( 'main', plugins_url( '/js/main.js', __FILE__ ));
}

插入主要的JavaScript代码：

(function() {

  let datepicker = new HotelDatepicker(document.getElementById('datepicker'), options);

  ...

})();

我很好奇该插件在本地运行良好，但是通过WordPress调用该插件后，它不再找到parentElement。谁能帮忙？

Answer 1

这是因为在页面上呈现日期选择器输入之前要包含main.js。如果您在jQuery文档就绪处理程序中移动该行，那么它应该可以工作：

(function() {

  $(function(){

    let datepicker = new HotelDatepicker(document.getElementById('datepicker'), options);

...