CODEWITHSUNDEEP
jqueryeventsclick
user2736472
user2736472

Reputation: 41

jQuery event click firing multiple times

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?

Upvotes: 0

Views: 125

Answers (2)

user1769790
user1769790

Reputation: 1343

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);    
});

Upvotes: 0

ahansen
ahansen

Reputation: 234

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.

Upvotes: 1

Related Questions