jQuery event click firing multiple times

Question

I'm trying to show a div one after the other when my "add_more" button is clicked. The first click works as I would like, but on the second click all of the divs show.

$(document).ready(function() {
        $('#add_more').click(function() {
            $('#add_more_fields').show(500);
        });
    });

    $('#add_more').click(function() {
        if($('#add_more_fields').is(':visible')) {
            $('#add_more_fields2').show(500);
        };
    });

    $('#add_more').click(function() {
        if($('#add_more_fields2').is(':visible')) {
            $('#add_more_fields3').show(500);
        };
    });

    $('#add_more').click(function() {
        if($('#add_more_fields3').is(':visible')) {
            $('#add_more_fields4').show(500);
        };
    });

    $('#add_more').click(function() {
        if($('#add_more_fields4').is(':visible')) {
            $('#add_more_fields5').show(500);
        };
    });

I see the problem as being that all of these are tied to one click function and triggering at the same time. How do I separate the events, so that each click adds the next div?

Don't use multiple event handlers that handle the same event in quick succession. Although it works (jQuery allows this by triggering all of them so that an event handler much later on doesn't overwrite an already existing handler) it makes it much harder to read, and adds lines of code, when you can just bundle your code into a single event handler. — Tom Heard
– Tom Heard, Commented Nov 14, 2013 at 23:10
Although now that I've said this someone is probably going to come up with a use case of when to do it that I haven't thought of. But this certainly isn't one of those cases. — Tom Heard
– Tom Heard, Commented Nov 14, 2013 at 23:12

ahansen · Accepted Answer · 2013-11-14 22:57:36Z

1

I'd use an else if in reverse order. Such that:

$('#add_more').click(function() {
    if($('#add_more_fields4').is(':visible')) {
        $('#add_more_fields5').show(500);
    } else if($('#add_more_fields3').is(':visible')) {
        $('#add_more_fields4').show(500);
    } else if($('#add_more_fields2').is(':visible')) {
        $('#add_more_fields3').show(500);
    } else if($('#add_more_fields').is(':visible')) {
        $('#add_more_fields2').show(500);
    } else {
        $('#add_more_fields').show(500);
    }
});

This way only one is being executed each click, and the one which is being executed the most resent one.

answered Nov 14, 2013 at 22:57

ahansen

2444 silver badges17 bronze badges

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

4 Comments

Tom Heard Over a year ago

Aww you beat me by like 40 seconds, I'll delete mine since it is exactly the same.

ahansen Over a year ago

I had a feeling answering this question was going to be a race hah

Tom Heard Over a year ago

I more found it funny that our answers were pretty much identical.

user2736472 Over a year ago

Thanks for assisting me. I felt like the answer was starring me in the face, so I guess you guys proved me right :)

user1769790 · Accepted Answer · 2013-11-14 23:24:46Z

0

Am not sure if this works; but you can tweak this. I have not tested. If you can give a jsfiddle for html; I can post a tested working solution.

$('#add_more').click(function(i,v){ // each time add_more is clicked
   var num = + $(v).attr('id').split('add_more')[1]; // get the number from the id
   var s = ['#add_more_fields' + num]
   $('s').show(500);    
});

answered Nov 14, 2013 at 23:24

user1769790

1,3833 gold badges12 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery event click firing multiple times

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related