javascript - 自定义Wordpress插件: Cannot read property 'parentElement' of null

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 之类的函数中。

项目网址: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

事实上，您在 document.ready 函数中并没有它，这就是问题所在 - 您在页面上呈现日期选择器输入之前包含了 main.js。如果您将该行移到 jQuery 文档就绪处理程序中，那么它应该可以工作:

(function() {

  $(function(){

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

...