jquery not working in wordpress

2019-01-09 13:52发布

Wordpress is not loading jquery - I think it may have something to do with the fact that it is loading the files absolutely, not relatively, and it won't go to the url (firebug is saying access denied to restricted uri). I have tested vanilla javascript and that works, however as soon as i try to do even the most basic function in $(document).ready(function(){}) it stops working.. is there a way to stop wordpress from appending the website uri to the linked files, and reference them relatively instead, as i think this may fix it.

The outputted head is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>simplespace &mdash; not quite ready yet</title>



<meta name="generator" content="WordPress 3.0.1" /> <!-- leave this for stats -->

<link rel="stylesheet" href="http://simplespace.co.nz/wp-content/themes/blass2/style.css" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://simplespace.co.nz/feed/" />

<link rel="alternate" type="text/xml" title="RSS .92" href="http://simplespace.co.nz/feed/rss/" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://simplespace.co.nz/feed/atom/" />

<link rel="pingback" href="http://simplespace.co.nz/xmlrpc.php" />

<link rel="shortcut icon" href="http://simplespace.co.nz/wp-content/themes/blass2/favicon.ico" />

    <link rel='archives' title='September 2010' href='http://simplespace.co.nz/2010/09/' />

<link rel='stylesheet' id='sociable3-css'  href='http://simplespace.co.nz/wp-content/plugins/sociable-30/sociable.css?ver=5.10' type='text/css' media='all' />
<script type='text/javascript' src='http://simplespace.co.nz/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/js/jquery.lightbox.js?ver=3.0.1'></script>
<script type='text/javascript' src='http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/js/wfm-lightbox.php?ver=3.0.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://simplespace.co.nz/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://simplespace.co.nz/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='simplespace' href='http://simplespace.co.nz/' />
<meta name="generator" content="WordPress 3.0.1" />
<script type="text/javascript" src="http://simplespace.co.nz/wp-content/plugins/audio-player/assets/audio-player.js?ver=2.0.4.1"></script>
<script type="text/javascript">AudioPlayer.setup("http://simplespace.co.nz/wp-content/plugins/audio-player/assets/player.swf?ver=2.0.4.1", {width:"400",animation:"yes",encode:"yes",initialvolume:"60",remaining:"no",noinfo:"no",buffer:"5",checkpolicy:"no",rtl:"no",bg:"dcf2fa",text:"333333",leftbg:"dcf2fa",lefticon:"333333",volslider:"666666",voltrack:"cfcfcf",rightbg:"9ee1f7",rightbghover:"dcf2fa",righticon:"333333",righticonhover:"333333",track:"FFFFFF",loader:"9ee1f7",border:"CCCCCC",tracker:"dcf2fa",skip:"666666",pagebg:"FFFFFF",transparentpagebg:"yes"});</script>

<!-- WFM INSERT LIGHTBOX FILES -->
<link rel="stylesheet" href="http://simplespace.co.nz/wp-content/plugins/wordpress-flickr-manager/css/lightbox.css" type="text/css" />
<!-- WFM END INSERT -->


<script type='text/javascript'>
$(document).ready(function() {
  alert('test');
});
</script>
</head>

3条回答
啃猪蹄的小仙女
2楼-- · 2019-01-09 14:34

I looked at the site and jquery is loading. This:

<script type='text/javascript'>
$(document).ready(function() {
  alert('test');
});
</script>

wont work because WordPress uses jquery in no conflict mode. This:

jQuery(document).ready(function($){
alert('test');
    });

is how it should be called in no conflict mode. Also the lightbox plugin is throwing an error:

Uncaught TypeError: Object # has no method 'lightBox'

查看更多
ら.Afraid
3楼-- · 2019-01-09 14:36

Wordpress puts jQuery in no-conflict mode which disabled the $() function. Unless you disable no-conflict mode in jQuery you'll have to use jQuery() instead of $().

查看更多
成全新的幸福
4楼-- · 2019-01-09 14:53

Try this:

Full answer for those who are facing same problem

You can wrap your javascript inside a self-invoking function, then pass jQuery as an argument to it, using $ as the local variable name. For example:

(function($) {
   $(document).ready(function(){
      alert('test');
   });
}(jQuery));

The jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can link.

In the noConflict() mode, the global $ shortcut for jQuery is not available.

查看更多
登录 后发表回答