jquery not loading on wordpress / web page
Question
I have Wordpress blog page which imported JS file. JS code should be started after page load, but it's not working. I don't know why.
Following file exists on server: http://.. /wp-content/themes/XXXX/js/script.js No errors in FF console,
Generated html looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" pl-pl>
<head profile="http://gmpg.org/xfn/11">
<title>XXXX test › Just another WordPress site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<meta property="og:title" content="XXXX" />
<meta property="og:site_name" content="The easiest and fastest way to claim your PAYE tax refund."/>
-->
<link href="http://localhost/wp-content/themes/XXXX/css/bootstrap.min.css" type="text/css" media="screen" rel="stylesheet" />
<link href="http://localhost/wp-content/themes/XXXXX/style.css" title="very`plaintxt" rel="stylesheet" media="screen,projection" />
<link rel="stylesheet" type="text/css" media="print" href="http://localhost/wp-content/themes/XXXXX/print.css" />
<link rel="alternate" type="application/rss+xml" href="http://localhost/?feed=rss2" title="XXXXX test RSS feed" />
<link rel="alternate" type="application/rss+xml" href="https://XXXXX.disqus.com/latest.rss" title="XXXXXX test comments RSS feed" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
<script>
var theChampSiteUrl = 'http://localhost';
</script>
<div id="fb-root"></div>
<script>
var theChampFBKey = '';
var theChampFBLang = 'en_US';
</script>
<script>
var theChampForceFBComment = false;
var theChampFBCommentTitle = '';
var theChampFBCommentUrl = 'http://localhost/?p=44';
var theChampFBCommentColor = '';
var theChampFBCommentNumPosts = '';
var theChampFBCommentWidth = '100%';
var theChampFBCommentOrderby = '';
var theChampFBCommentMobile = '';
var theChampFBAppID = '';
var theChampSiteUrl = 'http://localhost';
var theChampWPCommentingContent = '';
var theChampFBCommentingContent = '';
var theChampCommentingLoadFbFirst = 1;
var theChampCommentingSwitchWpText = 'Switch to default commenting';
var theChampCommentingSwitchFbText = 'Switch to Facebook commenting';
var theChampCommentingHandle = false;
</script>
<script>
var theChampSharingAjaxUrl = 'http://localhost/wp-admin/admin-ajax.php';
var theChampCloseIconPath = 'http://localhost/wp-content/plugins/super-socializer/images/close.png';
var theChampPluginIconPath = 'http://localhost/wp-content/plugins/super-socializer/images/logo.png';
var theChampHorizontalSharingCountEnable = 1;
var theChampVerticalSharingCountEnable = 0;
</script>
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://localhost/wp-includes/css/dashicons.min.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost/wp-includes/css/admin-bar.min.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='core-css' href='http://localhost/wp-content/plugins/simple-subscribe/assets/styleFrontEnd.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='the-champ-frontend-css-css' href='http://localhost/wp-content/plugins/super-socializer/css/front.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='really_simple_share_style-css' href='http://localhost/wp-content/plugins/really-simple-facebook-twitter-share-buttons/style.css?ver=4.0.1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/wp-content/themes/XXXXX/js/script.js?ver=4.0.1'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/social_login/general.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/facebook/sdk.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/facebook/commenting.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://localhost/wp-content/plugins/super-socializer/js/front/sharing/sharing.js?ver=3.4.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.0.1" />
<script type="text/javascript">
<!--
var a2a_config = a2a_config || {},
wpa2a = {
done: false,
html_done: false,
script_ready: false,
script_load: function() {
var a = document.createElement('script'),
s = document.getElementsByTagName('script')[0];
a.type = 'text/javascript';
a.async = true;
a.src = 'http://static.addtoany.com/menu/page.js';
s.parentNode.insertBefore(a, s);
wpa2a.script_load = function() {};
},
script_onready: function() {
if (a2a.type == 'page') {
wpa2a.script_ready = true;
if (wpa2a.html_done) wpa2a.init();
}
},
init: function() {
for (var i = 0, el, target, targets = wpa2a.targets, length = targets.length; i < length; i++) {
el = document.getElementById('wpa2a_' + (i + 1));
target = targets[i];
a2a_config.linkname = target.title;
a2a_config.linkurl = target.url;
if (el) {
a2a.init('page', {
target: el
});
el.id = '';
}
wpa2a.done = true;
}
wpa2a.targets = [];
}
};
a2a_config.tracking_callback = ['ready', wpa2a.script_onready];
a2a_config.onclick = 1;
a2a_config.show_title = 1;
//-->
</script>
<script type="text/javascript">
//<![CDATA[
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
//]]>
</script>
<style type="text/css" media="all">
/*<![CDATA[*/
/* CSS inserted by theme options */
body {
font-family: 'times new roman', times, serif;
font-size: 90%;
}
body div#container {
float: left;
margin: 0 -200px 2em 0;
}
body div#content {
margin: 3em 200px 0 0;
}
body div.sidebar {
float: right;
}
body div#content div.hentry {
text-align: left;
}
body div#content h2,
div#content h3,
div#content h4,
div#content h5,
div#content h6 {
font-family: arial, helvetica, sans-serif;
}
body div#wrapper {
max-width: 55em;
min-width: 35em;
width: 80%;
}
body div.sidebar {
text-align: center;
}
/*]]>*/
</style>
<style type="text/css">
.recentcomments a {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
}
</style>
<style type="text/css" media="print">
#wpadminbar {
display: none;
}
</style>
<style type="text/css" media="screen">
html {
margin-top: 32px !important;
}
* html body {
margin-top: 32px !important;
}
@media screen and ( max-width: 782px) {
html {
margin-top: 46px !important;
}
* html body {
margin-top: 46px !important;
}
}
</style>
</head>
JS file:
$(function () {
alert("aaa");
/*
$('#elp_txt_email').addClass('form-control');
$('#elp_txt_button').addClass('hide');
*/
});
3 answers
solution1
7 ACCPTED 2014-12-23 11:17:42
Try this:
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('aaa');
});
}(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.
solution2
1 2014-12-23 11:24:51
Actually this should work:
jQuery(document).ready(function(){
alert('aaa');
});
solution3
0
Not sure if its related to this issue but I have encountered this issue frequently so documenting it anyway in this context is a good idea...
In my case the issue was that Ajax form handler not being called after form submit. Instead it would directly branch to the 'action' parameter given in the form.
The basic issue was due to repeated switching of WYSIWYG and HTML editors in the wordpress, somehow the ajax form submit handler was commented out by automatically by inserting ![CDATA[.
The solution is to disable WYSIWYG while editing wordpress posts and delete the ![CDATA[ keyword before the scripts...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Page loading issue with wordpress
jquery not loading in WordPress
Jquery wordpress content loading
jQuery scripts not loading in WordPress
Stop A Web Page From Loading Until A JQuery AJAX Call Completes?
Loading A Web Page Seamlessly
web page loading time
Web page loading “zoomed”
Loading widget on web page
Loading WordPress Posts on a html page
Related Tags