OnClick event for buttons dynamically generated from array

Question

This is my first SO question :)

I've dynamically created buttons from an array, and am trying to attach an onclick event to each of them. So far, I haven't been able to log any reaction from them. How would I target a specific button in the set?

Thank you! `

var topics = ["Amy Winehouse", "Aretha Franklin", "Beyonce","Bjork", "Barbara Streisand", "Britney Spears", "Cher","Christina Aguilera", "Celine Dion", "Diana Ross","Donna Summer","Debbie Harry","David Bowie","Dolly Parton","Erykah Badu","Jennifer Lopez","Lana del Rey","Lady Gaga","Missy Elliot","Madonna","Mariah Carey","Shakira","Stevie Nicks","Whitney Houston"];

   var buttons;
//function to create buttons
function divaBtns(){
  for (var i=0; i < topics.length; i++){
     buttons = $('<div></div>');

       buttons.html("<input type='button' id='buttons' value='" + topics[i] + "'/>");

        $("#btns").append(buttons);
      }
    }

divaBtns();

$('#btns').on('click', 'button', function(){
    console.log("click");
});

<!DOCTYPE html>
  <html>
    <head>
      <!--chart.js-->

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="./assets/giphy.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
      <link rel="stylesheet" href="./assets/style.css">
      <title>Diva Gifs</title>

    
    </head>
    <body class="body">
     
      <div class="container">
        <div id="btns"></div>
        <div id="gifs"></div>


      </div>


    </body>
  </html>

`

Your buttons variable feels like it doesn't need to be declared outside the loop - it is constantly getting overwritten so it'll end up being a div with the button for the last element in your array inside. var button = $('<div></div>'); inside the loop maybe? — IrkenInvader
– IrkenInvader, Commented Nov 8, 2017 at 0:08
also note - each button has an id="buttons", you're not supposed to have multiple elements with the same id. Maybe you could just add a class='diva-btn' instead? — IrkenInvader
– IrkenInvader, Commented Nov 8, 2017 at 0:09

Mark · Accepted Answer · 2017-11-08 00:08:02Z

2

Your selector is wrong. You are attaching input elements, but this is selecting buttons:

$('#btns').on('click', 'button', function(){
    console.log("click");
});

This works for me:

$('#btns').on('click', 'input', function(e){
    console.log("click: ", e.target.value);
});

var topics = ["Amy Winehouse", "Aretha Franklin", "Beyonce","Bjork", "Barbara Streisand", "Britney Spears", "Cher","Christina Aguilera", "Celine Dion", "Diana Ross","Donna Summer","Debbie Harry","David Bowie","Dolly Parton","Erykah Badu","Jennifer Lopez","Lana del Rey","Lady Gaga","Missy Elliot","Madonna","Mariah Carey","Shakira","Stevie Nicks","Whitney Houston"];

   var buttons;
//function to create buttons
function divaBtns(){
  for (var i=0; i < topics.length; i++){
     buttons = $('<div></div>');

       buttons.html("<input type='button' id='buttons' value='" + topics[i] + "'/>");

        $("#btns").append(buttons);
      }
    }

divaBtns();

$('#btns').on('click', 'input', function(e){
    console.log("click: ", e.target.value);
});

<!DOCTYPE html>
  <html>
    <head>
      <!--chart.js-->

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="./assets/giphy.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
      <link rel="stylesheet" href="./assets/style.css">
      <title>Diva Gifs</title>

    
    </head>
    <body class="body">
     
      <div class="container">
        <div id="btns"></div>
        <div id="gifs"></div>


      </div>


    </body>
  </html>

edited Nov 8, 2017 at 0:08

answered Nov 8, 2017 at 0:01

Mark

92.6k8 gold badges116 silver badges156 bronze badges

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

1 Comment

Aisatsana102 Over a year ago

Just read the FAQ's on etiquette for this site, and it said not to leave thank you's in comments- but this is my first question ever and I just want to say you and this site are awesome- Thank you!

constdrop · Accepted Answer · 2017-11-08 00:59:17Z

-1

Selector '#btns' doesn't point the created buttons. It may be fix to change last 3rd row like below.

$('#btns input').on('click', function(){

edited Nov 8, 2017 at 0:59

answered Nov 8, 2017 at 0:15

constdrop

644 bronze badges

Collectives™ on Stack Overflow

OnClick event for buttons dynamically generated from array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related