Grow your CSS skills. Land your dream job.

[Solved] simple jQuery not working in wordpress

  • # August 18, 2008 at 5:12 pm

    I have a page in wordpress, im putting all my html in that page using the wordpress editor
    i have included my own JS in the header

    NONE OF MY JQUERY SCRIPTS WORK IN WORDPRESS I DONT KNOW WHY

    here is the page http://khaledstudios.com/?page_id=11

    all there is, is a link there that says click me

    and here is the JS

    Code:
    $(document).ready(function() {
    $(‘a’).click(functino(event) {
    $(this).preventDefault();
    alert(‘abc’);
    });
    });

    this sould work i dont know why it isnt.

    # August 18, 2008 at 6:21 pm

    well right off the bat i can see that you spelled function wrong

    you have this
    $(‘a’).click(functino(event) {

    i am sure it’s suppose to be this
    $(‘a’).click(function(event) {

    # August 19, 2008 at 12:11 am

    srry i fixed that, i wrote that script just for a quick demonstration purpose. i fixed the problem and i still get the problem. ….

    # August 19, 2008 at 1:37 am

    have you included the jquery library into your head section?

    # August 19, 2008 at 2:43 am

    try doing this.

    1. Include the jquery library into the head section of your code

    <script type="text/javascript" src="jquery-1.2.6.min.js"></script> //Make sure to download this version from the jquery site.

    2. Change you code to this

    <script type="text/javascript">

    $(function(){
    $("a").click(function(){
    alert("abc");
    });
    });
    </script>

    Notice the change from single quotes to double

    # August 19, 2008 at 2:26 pm

    ok i figured it out. in wordpress instead of using $() notation you have to use jQuery();
    thx for your guys help

    # February 14, 2010 at 3:47 pm

    I am having similar problems. I am trying to create a simple jquery accordion effect for a gym class timetable.
    I have added

    Code:
    < ?php wp_enqueue_script("jquery"); ?>

    < ?php wp_head(); ?>

    To the Header.php
    and linked to my script just under

    Code:
    < ?php wp_head(); ?>

    with

    Code:

    Like Chris mentions in his WordPress book!

    Here is the jquery file

    Code:
    function initMenus() {
    $(‘ul.menu ul’).hide();
    $.each($(‘ul.menu’), function(){
    $(‘#’ + this.id + ‘.expandfirst ul:first’).show();
    });
    $(‘ul.menu li a’).click(
    function() {
    var checkElement = $(this).next();
    var parent = this.parentNode.parentNode.id;

    if($(‘#’ + parent).hasClass(‘noaccordion’)) {
    $(this).next().slideToggle(‘normal’);
    return false;
    }
    if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
    if($(‘#’ + parent).hasClass(‘collapsible’)) {
    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
    }
    return false;
    }
    if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
    $(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
    checkElement.slideDown(‘normal’);
    return false;
    }
    }
    );
    }
    $(document).ready(function() {initMenus();});

    yet when i addd the html code in the page when i preview it there is no jquery in motion.

    Does anyone have an idea of where i am going wrong?
    This is my first attempt at adding jquery in wordpress without using a wordpress plugin.
    Just noticed this thread is in the CSS Section. Not sure why!

    # February 15, 2010 at 7:39 am

    Found out else where that i need to replace

    Code:
    $

    with

    Code:
    jQuery

    for this script to work in wordpress.

    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".