jQuery和Wordpress-脚本不起作用 [英] jQuery and Wordpress - Scripts not working

问题描述

我正在尝试对正在创建的wp插件实施一些jquery.

Im trying to implement some jquery to a wp plugin I am creating.

在我主题的functions.php中，我有以下代码:

In the functions.php of my theme I have the following code:

function load_jquery() {

    // only use this method is we're not in wp-admin
    if ( !is_admin() ) {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');
        wp_deregister_script('jquery-ui-slider');
        wp_deregister_style('jquery-ui-style');


        // discover the correct protocol to use
        $protocol='http:';
        if($_SERVER['HTTPS']=='on') {
            $protocol='https:';
        }

        // register the Google CDN version
        wp_register_script('jquery', $protocol.'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2');
        wp_register_script('jquery-ui-slider', $protocol.'//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, '1.10.3');
        wp_register_style('jquery-ui-style', $protocol.'//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css', false );

        // add it back into the queue
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-ui-slider');
        wp_enqueue_style('jquery-ui-style');
    }
}

add_action('wp_enqueue_scripts', 'load_jquery');

然后在一个插件文件中，我通过一个函数和add_action('wp_head'，'functions_name');

Then in one of the plugin files I output the following via a function and add_action('wp_head', 'functions_name');

echo '
<script type="text/javascript">

  jQuery(function($) {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
</script>';

即使我可以看到在实际脚本之前加载的jquery，仍然没有任何效果.

Still nothing works, even though I can see the jquery loaded before the actual script.

有什么想法吗?如果我跳过wp_enqueue_script部分并跳过主题文件的header.php中的所有内容，它将起作用.

Any ideas? It works if I skip the wp_enqueue_script part and past everything inside the header.php of the themefile.

推荐答案

您应该使用jQuery(document).ready(function($)包装脚本，因为可以加载jquery对象，但同时也需要jquery-ui脚本.

You should wrap your script with jQuery(document).ready(function($) because the jquery object may be loaded but you need the jquery-ui scripts as well.

<script type="text/javascript">
jQuery(document).ready(function($){
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>';

这篇关于jQuery和Wordpress-脚本不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！