adding multiple buttons dynamically and add each a click handler in jquery

Question

I'm trying to add buttons dynamically with Jquery, now for each button, I want to perform a different action, how can I achieve it? Each couple of buttons will toggle after the action is performed e.g.

show 1 after click becomes hide1
show 2 after click becomes hide2
show 3 after click becomes hide3

I created a JSFiddle to display what I achieved so far.

var randomMeetings = Math.floor(Math.random() * 10) + 1;


for(var i = 0; i < randomMeetings; i++){
    var expandClient = '<button type="button" class="hide_client" id="_hide_'+ i +'"><i     class="fa fa-plus-square-o"></i></button><button type="button" class="show_client" id="_show_'+ i +'"><i class="fa fa-minus-square-o"></i></button>'

    $('#myButtons').append(expandClient);

}

for (var i = 0; i < randomMeetings; i++){

    $('#_show_'+i).click(function() {
        $('#_hide_'+i).toggle();       
    });
    $('#_hide_'+i).click(function() {
        $('#_show_'+i).toggle();

    });
}

Here's one way: jsfiddle.net/vzbhmsjw/1

user5734311
– user5734311

2017-02-17 17:30:19 +00:00
Commented Feb 17, 2017 at 17:30 — user5734311
– user5734311, Commented Feb 17, 2017 at 17:30

gaetanoM · Accepted Answer · 2017-02-17 17:40:13Z

1

This line inside a for loop is not valid:

$('#_hide_'+i).toggle();

This happens because when the for loop ends and in future a click event happens the value of the variable i is always the last.

You may change your line in (or use a closure like IIFE or let or add an element attribute):

$('#' + this.id.replace('hide', 'show')).toggle();

So that whenever you click on "_hide_0" you will toggle "_show_0" and so on.

The snippet (updated jsfiddle):

var randomMeetings = Math.floor(Math.random() * 10) + 1;


for(var i = 0; i < randomMeetings; i++){
    var expandClient = '<button type="button" class="hide_client" id="_hide_'+ i +
            '"><i class="fa fa-plus-square-o"></i>' + i + '</button>' +
            '<button type="button" class="show_client" id="_show_'+ i
            +'"><i class="fa fa-minus-square-o"></i>' + i + '</button>'

    $('#myButtons').append(expandClient);

    $('#_show_'+i).click(function() {
        var eleId = this.id.replace('show', 'hide');
        console.log("show " + eleId)
        $('#' + eleId).toggle();
    });
    $('#_hide_'+i).click(function() {
        var eleId = this.id.replace('hide', 'show');
        console.log("hide " + eleId)
        $('#' + eleId).toggle();

    });
}

.hide_client,.show_client{
    padding:3em;
}

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


<div id="myButtons">

</div>

edited Feb 17, 2017 at 17:40

answered Feb 17, 2017 at 17:28

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

2 Comments

Sivvio Over a year ago

Thank you! It's almost what I am looking for, after fiddling around I still couldn't get to hide the button once clicked (e.g. if I click a button, it will disappear only displaying the second button, and once clicking on this button it will disappear and show the first one). The only solution that comes to my mind is to use $('#_hide_'+i).show(); and $('#_hide_'+i).hide(); but as you mentioned it will not work in the for loop. Any other solution?

Sivvio Over a year ago

just found out how to do it

Sivvio · Accepted Answer · 2017-02-20 11:36:13Z

0

I edited Gaetano's answer with a single line to hide and display the button once clicked I updated the JS fiddle: JSFiddle

$(this).css('display', 'none');

answered Feb 20, 2017 at 11:36

Sivvio

2972 gold badges9 silver badges22 bronze badges

Collectives™ on Stack Overflow

adding multiple buttons dynamically and add each a click handler in jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related