JQuery function doesn't fire on first click, but behaves as expected on all subsequent clicks

Question

I simply need the selected link to show as selected and to show the indicated div while hiding the other two. Here's the jsfiddle:

http://jsfiddle.net/HZ4CZ/1/

Why is it not working the first click, but working every click after that?

$(document).ready(function() {
    $('ul#chooseType li a').click(function(e) {   
        $('#active').click(function(){
            $('.activeDiv').removeClass('show_hide');
            $('.inactiveDiv').addClass('show_hide');
            $('.thirdMenuDiv').addClass('show_hide');
            $('#active').addClass('selected');
            $('#inactive').removeClass('selected');
            $('#thirdMenu').removeClass('selected');
        });
        $('#inactive').click(function(){
            $('.activeDiv').addClass('show_hide');
            $('.inactiveDiv').removeClass('show_hide');
            $('.thirdMenuDiv').addClass('show_hide');
            $('#active').removeClass('selected');
            $('#inactive').addClass('selected');
            $('#thirdMenu').removeClass('selected');
        });
        $('#thirdMenu').click(function(){
            $('.activeDiv').addClass('show_hide');
            $('.inactiveDiv').addClass('show_hide');
            $('.thirdMenuDiv').removeClass('show_hide');
            $('#active').removeClass('selected');
            $('#inactive').removeClass('selected');
            $('#thirdMenu').addClass('selected');
        });

    });
});

Your first click is binding all the second click handlers. It's working exactly as I would expect it to work. — Evan Davis, Sep 27 '13 at 18:09

score 6 · Accepted Answer · edited Sep 27 '13 at 18:11

6

Dont nest your click handlers! Get rid of that all encompassing handler and you're set. Fiddle: http://jsfiddle.net/tymeJV/HZ4CZ/2/

Axe this handler: $('ul#chooseType li a').click(function(e) {

It works because none of your click handlers actually get bound on page load, they get bound after the initial click.

edited Sep 27 '13 at 18:11

Evan Davis

35,493
6
50
57

answered Sep 27 '13 at 18:10

tymeJV

103,943
14
161
157

Ah, thank you! I'm brand new to jquery and pieced this together based on two different answers I found elsewhere (one for the style change and the other for showing/hiding the divs). Thank you so much! – user1325194 Sep 27 '13 at 18:12

score 1 · Answer 2 · answered Sep 27 '13 at 18:17

1

You're installing one click handler 'ul#chooseType li a' which - when clicked - installes the other click handlers. Just remove it and it should work: http://jsfiddle.net/HZ4CZ/12/

answered Sep 27 '13 at 18:17

Scheintod

7,953
9
42
61

score 0 · Answer 3 · answered Sep 27 '13 at 18:18

Add a class display to all the DIVs that are used to display the tab contents. Then use DRY code like this:

$(document).ready(function() {
    $('ul#chooseType li a').click(function(e) {  
        $('ul#chooseType li a').removeClass('selected');
        $(this).addClass('selected');
        $('.display').addClass('show_hide');
        $('.display.'+this.id+'Div').removeClass('show_hide');
    });
});

FIDDLE

score 0 · Answer 4 · answered Jun 13 '21 at 14:00

0

I was importing bootstrap in one of my components like this:

import 'bootstrap/dist/js/bootstrap.bundle.min.js';

It turned out it was not needed to import bootstrap at all.

answered Jun 13 '21 at 14:00

Displee

670
8
20

JQuery function doesn't fire on first click, but behaves as expected on all subsequent clicks

4 Answers4

Linked