JQuery is not working in wordpress – Solution
Since WordPress version 2.x, jQuery is a build-in Javascript library, explicitly include the jQuery library into WordPress is not necessary.
Problem
The jQuery is not working in WordPress plug-in writing? When you try to test a simple jQuery effect like following
$(document).ready(function(){
alert('test');
});
It’s just not working, no alert message box pop up. The same script is working as expected in single HTML page. What’s the heck? Is there any interoperability issues between jQuery and WordPress?
Solution
In WordPress, the$() syntax is always used by other scripting library, and causing the conflict issue and fail to call the jQuery function. You should use jQuery() instead…
jQuery(document).ready(function(){
alert('test');
});
Alternatively, you can use noConflict() …
$j=jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
alert('test');
});
P.S jQuery.noConflict(); – http://wordpress.org/support/topic/141394
Never use jQuery handy function $() in WordPress plugin. You have to use jQuery() or jQuery.noConflict() to work between jQuery and WordPress.
About Author
Thank you! I had many problems with “$” and I found the solution here 😉
Thanks Man.
It Worked For me
You’re a lifesaver mate! tnx a lot!
It worked for me. Thank you!
er….so my jquery is not working (ata ll no pop up) So what is the solution?
Thanks, man!!
You can also use jQuery(function ($)
That way, you wont get Property ‘$’ of object is not a function errors.
Yes, it is the best way!
<link rel="stylesheet" type="text/css" href="css/contentslider.css” />
.contentdiv{display: none;}
featuredcontentslider.init({
id: “slider1”, //id of main slider DIV
contentsource: [“inline”, “”], //Valid values: [“inline”, “”] or [“ajax”, “path_to_file”]
toc: “#increment”, //Valid values: “#increment”, “markup”, [“label1”, “label2”, etc]
nextprev: [“Previous”, “Next”], //labels for “prev” and “next” links. Set to “” to hide.
revealtype: “click”, //Behavior of pagination links to reveal the slides: “click” or “mouseover”
enablefade: [true, 0.14], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
I am using content slider but when i am clicking on menu field slider expanding out of width
Thank you so much! By the way, the input names and fields are the wrong way around on this comment form.
WOW!
I’m new to WordPress and this was getting on my nerves… because I wanted to go fast… Tnx man!
Life Saver! Thank You So Much!
Keep on posting Quality Post Like This!
You’re The Man!!!
‘Just another’ THANK YOU!! life saver!
Saved my life too. I taught i won’t be able to find solution to this jquery problem in google search. But i luckily found your website. Generally i wont take time to like a page but this time i took time to like this page.
Very informative site.helped me a lot,to sort out my jquery plugin issues in my site.
Thx a lot.Keep it up.
Thanks a lot Mkyong. I was baffled when my jquery navigation wouldn’t work in WordPress but your solution solved this issue!
very informative i got the solution of my problem, thanks.
mkyong, you saved my day. Thanks a ton for the great info!
Browser Compatability issue in java jsp
1.Scrollbar is displaying in Internet Explorer but it is not displaying in Mozilla.It is displaying in Mozilla only when the text entered exceeds the size of the Scrollbar
Pls provide a solution
Many thanks for this, was tearing my hair out trying to discover why my perfectly fine standalone script wouldn’t work in WordPress!
Same here! Thank you much!
After hours, headache and etc, i found the solution here, thank you very much!
simply replace
$(document).ready(function() {
$(“a.watchvideo”).fancybox({
‘overlayShow’: false,
‘frameWidth’ : 480,
‘frameHeight’ : 400
});
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
$(“a.watchvideo”).fancybox({
‘overlayShow’: false,
‘frameWidth’ : 480,
‘frameHeight’ : 400
});
}
}
It works fine 🙂
simply replace
$(document).ready(function() {
….
….
});
with
function pageLoad(sender, args)
{
if(args.get_isPartialLoad())
{
….
….
}
}
hi. is there anybody for explanin how will ? do that. becasuse ? dont know what will ? do exatly. if you help me ? ll pride for you. thnx
Saved my life , Thanks
Thank you mkyong,
Your post, helped a lot of my time
letssaycprox
Thank you, thank you, thank you! Good grief, I can’t believe that after countless hours of debugging, this jQuery/WordPress conflict was the root of my issue.
Great work, Mkyong. Appreciated!
Thanks a lot – had not used jQuery with WordPress before and I was getting frustrated.
My jQuery isn’t working. I’m using .noConflict(), everything is loading in the correct order, and I’m able to click to my JS file from viewing the source for my website. I would provide a link but it’s on my local machine. Any suggestions?
Also, I have it in a folder called js which is in the folder for my theme. It seems like it should be in the folder for my theme but maybe i’m mistaken?
Thanks a lot dude… I came out from problem. 🙂
Thanks so much for that! This was driving me crazy!!!
Big lightbulb just turned on. Invaluable.
Good to know it’s worked to you.