Assigning classes or ids to button created dynamically using jquery

Question

I am creating several buttons dynamically. I am trying to assign each on a different class or id so when it is clicked on it will have a different output. How would I add an value at the end of each class or id name to give each button a unique class or id name? Here is my code

socket.on('usernames', function(data){
    var $contentWrap = $("#contentWrap").empty();
    for(i=0; i <data.length; i++){
        $input = $('<input type="button" style="width:200px" class= "button"/></br>');
        $input.val(data[i]);
        $input.appendTo($("#contentWrap"));
    }
});

Can I created an on click event for the all button that I created. So far I created an on click even, but it only works for the first button. Here is my code

$(document.body).on('click','.button', function(e) { 
    console.log($('.button').val());
});

Does the console log the same value for all the button click event or you say the console log happens only on first button click — Rajshekar Reddy
– Rajshekar Reddy, Commented Sep 22, 2016 at 18:17

Ibrahim Khan · Accepted Answer · 2016-09-22 18:17:44Z

1

Use $(this).val() instead of $('.button').val(). this will refer clicked button.

$(document.body).on('click','.button', function(e) { 
    console.log($(this).val());
});

answered Sep 22, 2016 at 18:17

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

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

Comments

jsquerylover · Accepted Answer · 2016-09-22 18:20:10Z

0

socket.on('usernames', function(data){
    var $contentWrap = $("#contentWrap").empty();
    for(i=0; i <data.length; i++){
        $input = $('<input type="button" id="btn"'+i+' style="width:200px" class= "button"/></br>');
        $input.val(data[i]);
        $input.appendTo($("#contentWrap"));
    }
});

answered Sep 22, 2016 at 18:20

jsquerylover

563 bronze badges

1 Comment

jsquerylover Over a year ago

and use e.target.id for checking whether which is called

Rajshekar Reddy · Accepted Answer · 2016-09-22 18:21:20Z

0

Problem: Is with this part of code console.log($('.button').val()); The part $('.button') selects all the buttons , But when you say .val() it defaults to the first one out of the collection. Hence you see the same output on all the button clicks.

Solution: Change the code to log the current clicked button value by using $(this).val(). this will refer to the element that triggered the event.

So the final line of code should be

console.log($(this).val());

answered Sep 22, 2016 at 18:21

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Collectives™ on Stack Overflow

Assigning classes or ids to button created dynamically using jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related