jQuery not working within Wordpress

2019-09-08 07:22发布

站内问答 / JavaScript
915 3 4

I have this bit of jQuery script that can be found here: http://jsfiddle.net/RUqNN/45/

When I incorporate this script into my wordpress template, I doesn't work.

I've check the jquery source link, rewritten the code, nothing works.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
    <body>
      <script type="text/javascript">
        $(document).ready(function() {
          $(".move").toggle(
            function() {
              $("#teetimetag").animate({
                right: "0px"
              }, "normal");
            },function() {
              $("#teetimetag").animate({
                right: "-200px"
              }, "normal");
          });
        });
    </script>
      <div id="teetimetag">
         <img class="move" src="http://test.tooheavytoskydive.com/wp-content/themes/newtheme/images/flag.png" style="float: left;" />
        <div style="margin: 15px 0 0 50px;">
          <a href="http://test.tooheavytoskydive.com/reservations/" style="color: #FFF; font-weight: bold; font-size: 17px;">Reserve your Tee-Time</a>
        </div>
      </div>
    </body>
    </html>

3条回答
欢心
2楼-- · 2019-09-08 08:03

As a general rule, you should not use the $ variable for jQuery unless you have used one of the shortcuts. The following is an example of how to shortcut jQuery to safely use the $ variable:

jQuery(function ($) {
    /* You can safely use $ in this code block to reference jQuery */
});

To load jquery at wordpress use the either one of the following 2 versions. Include the code at Plugin Page OR at function.php

function include_jQuery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

Definitely you can use any meaningful function name instead off include_jQuery.

Alternately, you can use the following code:

function include_jQuery() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery'); 
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3'); 
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'include_jQuery');

You may like THIS link as well from where I personally learn the above technique(s). A Very BIG Thanks to Ericm Martin!

查看更多
0人赞 添加讨论(0) 举报
Anthone
3楼-- · 2019-09-08 08:04

Your website gives the following javascript error: '$ is not a function'. It looks like jQuery conflicts with some other library. This can be solved by calling jQuery.noConflict() and replacing all $ with 'jQuery'. The code will look as follows:

jQuery.noConflict();
jQuery(document).ready(function() {
          jQuery(".move").toggle(
            function() {
              jQuery("#teetimetag").animate({
                right: "0px"
              }, "normal");
            },function() {
              jQuery("#teetimetag").animate({
                right: "-200px"
              }, "normal");
          });

});
查看更多
0人赞 添加讨论(0) 举报
女痞
4楼-- · 2019-09-08 08:12

you should register you js files in your template functions.php file: 

wp_register_script('jquery', 'http://code.jquery.com/jquery-1.7.2.min.js');

http://codex.wordpress.org/Function_Reference/wp_register_script

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)