WordPress.org

Ready to get started?Download WordPress

Forums

Problems Getting jQuery to Work (8 posts)

  1. JeremyEnglert
    Member
    Posted 1 year ago #

    I recently created a mobile navigation using jQuery as part of the drop-down function, you can see the code here:
    http://jsfiddle.net/senff/9cK3X/3/

    However, when I tried to add it to my WordPress site, I had no luck. Here is the code I added to my HEAD:

    jQuery('ul.menu > li > a').click(function(e) {
    
          jQuery('ul.sub-menu').slideUp('normal');
    
          if(jQuery(this).next('ul.sub-menu').is(':hidden') == true) {
              jQuery(this).next('ul.sub-menu').slideDown('normal');
              } 
    
          e.preventDefault();

    However, it does not seem to be working. Here is the website it's being used on (pull your browser small to see the mobile nav):
    http://www.mcfaddengavender.net/newmg/

    Any idea what I'm doing wrong?

    Thanks guys!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You're not closing your function.

  3. JeremyEnglert
    Member
    Posted 1 year ago #

    I'm now using this, still no luck:

    jQuery('ul.menu > li > a').click(function(e) {
    
          jQuery('ul.sub-menu').slideUp('normal');
    
          if(jQuery(this).next('ul.sub-menu').is(':hidden') === true) {
              jQuery(this).next('ul.sub-menu').slideDown('normal');
              } 
    
          e.preventDefault();
     });
  4. Andrew Bartel
    Member
    Posted 1 year ago #

    First off, use: on('click',function(e)...

    Have you confirmed that the basic functionality works by putting an alert in or anything?

  5. JeremyEnglert
    Member
    Posted 1 year ago #

    @Andrew Bartel,

    After trying to run a basic alert, I realized jQuery isn't functioning at all. This was also confirmed when I added this into my HEAD and everything began to work correctly:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    However, I understand that is not the "correct" way to call jQuery, which is why I was using this:

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

    However, the Enqueue function doesn't seem to be working for me. Is there something I need to place into the Functions.php to get the Enqueue function working? From my understanding, it was as simple as adding <?php wp_enqueue_script("jquery"); ?> to your HEAD.

  6. Andrew Bartel
    Member
    Posted 1 year ago #

    I don't pretend to know exactly the order of firing of hooks/filters/etc for WordPress, so, until my knowledge is where it needs to be I have had success creating separate js files and then running the wp_enqueue script in my functions.php.

    Example .js file:

    jQuery(document).ready(function()
    {
    // add jquery stuff here
    });
  7. Scripts should be enqueued in your functions.php or the main plugin file if you're using a plugin:

    <?php
    function my_scripts_method() {
        wp_enqueue_script('jquery');
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    ?>

    WordPress then automatically adds the script to your header. You shouldn't be adding your script calls directly to header.php -- first, because you need the add_action() part, and second, because that would kill one of the big benefits of enqueuing, which is to avoid conflicts with other scripts that may be added elsewhere.

  8. Andrew Bartel
    Member
    Posted 1 year ago #

    There you go, thanks Amy, learn something new everyday.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags