3

I have looked through a few of the other stackoverflow questions about the .click function not working but none of them seem to help me. I have my imports of the jquery libraries.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Here is my jquery and im not sure why this isnt working. I have it so it waits till the page is loaded to attempt to run. And i have the class on that element but it doesnt register the click.

$(document).ready(function() {
            $('nav.product-description-nav ul li a').click(function() {
                $(".product-description-nav ul").find($('li a.active-product-selection')).removeClass('active-product-selection');
                $(this).addClass('active-product-selection');
            });
        });

Here is my navigation with that i am trying to add the classes to and remove them on the click.

<nav class="product-description-nav">
    <ul>
        <li><a href="#" class="active-product-selection">Overview</a></li>
        <li><a href="#">Options</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Request A Quote</a></li>
    </ul>
</nav>

I always have trouble with jquery and I think i am referencing everything ok i know the remove class works if i add that statement to a function called on a click but i dont want to have onclick functions within the a element. Is my syntaxed messed up or maybe im referencing the jquery libraries wrong?

This is the answer to my problem

$(document).on('click','.product-description-nav a',function(){
            $(".product-description-nav a").removeClass('active-product-selection');
            $(this).addClass('active-product-selection');
        });
Improve this question
9
  • 4
    remove one of your imports Commented May 18, 2015 at 19:23
  • 4
    You're including two different versions of jQuery. Without serious precautions and care, that's not going to work well (or at all). Commented May 18, 2015 at 19:23
  • Try not to nest so hard. Give the a or li a class and use that as the selector. Remove the top extra jQuery include. Commented May 18, 2015 at 19:24
  • 1
    Once that's sorted out, your find() isn't going to work - you're looking for an li within an li. Commented May 18, 2015 at 19:26
  • Iv removed all the imports except the google import for jquery and that didnt work. Iv also changed the find function to look through the ul instead of the ul li and that didnt work either. Commented May 18, 2015 at 19:28

1 Answer 1

Reset to default
2

You don't need the entire hierarchy at all times. You can simply remove the class from all a tags within the nav, then add the class back to this:

$(document).ready(function() {
  $('nav.product-description-nav a').click(function() {
    $("nav.product-description-nav a").removeClass('active-product-selection');
    $(this).addClass('active-product-selection');
  });
});
.active-product-selection {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="product-description-nav">
  <ul>
    <li><a href="#" class="active-product-selection">Overview</a>
    </li>
    <li><a href="#">Options</a>
    </li>
    <li><a href="#">Downloads</a>
    </li>
    <li><a href="#">Request A Quote</a>
    </li>
  </ul>
</nav>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I'v tried to use this and its still not working for me. Does it matter that my navigation is being called into my page by a php include statement?
Not necessarily. It would matter if the elements were added, later, by Javascript. Since the example here works, it would be helpful to show an example with correct JS that does not work.
They would be added later. The elements are added after the body onload since i have them being added based on the url parameters and have them loaded using jquery .load() I would post the entire code but its alot of code and alot of it is sensitive information for my job that i cannot show. I have it down to the basics
"The basics", except for the part where "they are added after the body onload", which changes things significantly. If the elements don't exist when $('nav.product-description-nav a').click(function() { is called, the click handler is never installed. There's nothing to install it to. You could work around this by calling $(document).on('click', 'nav.product-description-nav a', function()... instead. Still guessing, since we still can't see any code that actually demonstrates the problem.
Sweet! The $(document).on() function worked. I havent ever used this so does the on function run once the document includes the element?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.