时间戳

首页 > 解决方案 > 自定义 Wordpress 插件：无法读取 null 的属性“parentElement”

javascript - 自定义 Wordpress 插件：无法读取 null 的属性“parentElement”

问题描述

我正在使用的库称为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了。任何人都可以帮忙吗？

标签： javascripthtmlwordpressdomdatepicker

解决方案

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

(function() {

  $(function(){

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

...

推荐阅读