jQuery UI对话框 - Wordpress中未捕获的TypeError

时间:2016-08-04 18:13:12

标签: jquery wordpress

我试图在Wordpress 4.5.3中实现一个jQuery UI对话框,但它只能工作一半左右。剩下的时间我收到以下错误:

Uncaught TypeError: jQuery(...).dialog is not a function  lwr_jquery_dialog.js(2)

我已将脚本排列如下,并验证它们是否按照页面上的正确顺序加载:

function enqueue_jquery_dialog() {

    wp_enqueue_script('jquery-ui-dialog', false, array('jquery','jquery-ui-core'), 
        false, true );
    wp_enqueue_script('lwr_dialog', get_stylesheet_directory_uri() . 
        '/js/lwr_jquery_dialog.js', array('jquery-ui-dialog') );        
}
add_action( 'wp_enqueue_scripts', 'enqueue_jquery_dialog' );

在lwr_jquery_dialog.js中我有:

jQuery(document).ready(function() {
    jQuery('#dialog').dialog({
        width: 600,
        modal: true,
        resizable: false,
        draggable: false,
    });
});

这里是functions.php

中的实际对话功能
function add_jquery_dialog() {
    ?>  
    <div id="dialog" title="Today Only">
            DIALOG TEXT HERE
    </div>
<?php
}
add_action('wp_footer', 'add_jquery_dialog');

1 个答案:

答案 0 :(得分:2)

更新1 :您缺少jquery-ui-dialog脚本。试试这个:

add_action('wp_enqueue_scripts', function()
{
  $theme_uri = get_stylesheet_directory_uri();

  wp_enqueue_script('lwr-jquery-dialog', $theme_uri . '/js/lwr_jquery_dialog.js',
['jquery-ui-core', 'jquery-ui-dialog'], false, true);
}, 10, 0);

由于您使用false作为源文件的值,因此依赖项未正确排队。有关详细信息,请参阅wp_enqueue_script()函数中的$src param。

试试这个:

add_action('wp_enqueue_scripts', function()
{
  $theme_uri = get_stylesheet_directory_uri();

  wp_enqueue_script('lwr-jquery-dialog', $theme_uri . '/js/lwr_jquery_dialog.js',
['jquery-core', 'jquery-ui-core'], false, true);
}, 10, 0);