jQuery UI对话框-在Wordpress中未显示的TypeError

Question

我试图在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');

Answer 1

更新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作为源文件的值，所以依赖项没有正确地排队。有关更多信息，请参见$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);