Jquery .map Click Event on specific Element

Question

Helllo, i have a Array like this:

let Array1 = [
    {name:"try1", id:"id1", symbol:"symbol1"},
    {name:"try2", id:"id2", symbol:"symbol2"},
    {name:"try3", id:"id3", symbol:"symbol3"},
    {name:"try4", id:"id4", symbol:"symbol4"},
    {name:"try5", id:"id5", symbol:"symbol5"}
]

and i want to make each of them a button. that i can click on each one. for this, i use .map Funnction ( im not sure this is the best option )

Array1.map(data => $(".check").html(`<a id="${data.id}" class="btn btn-info" href="#" role="button">${data.id}</a>`))

until now i get 5 buttons. 1 button each object with the id of the button.

the problem start here: i trying to catch a Click Event on this buttons. i cant make it done..

I tried:

(`${data.id}`).click(e => console.log("click))

I would be happy for help or any other way with the same result. Thankss !!

Instead of adding a separate click event listener on all the buttons, add a click event listener on the parent element of all the buttons and using Event.target, you can check whether a button was clicked and also which button was clicked. — Yousaf
– Yousaf, Commented Jul 29, 2020 at 11:18
"i use .map Funnction ( im not sure this is the best option )". No, it isn't. You simply use it as a loop. In that case use .forEach. .map() is only useful if you assign its outcome to something. (let arr2 = arr.map(...)) — Ivar
– Ivar, Commented Jul 29, 2020 at 11:27
Would you mind accepting the answer if i have solved your question ? — Always Helping
– Always Helping, Commented Aug 2, 2020 at 1:53

Always Helping · Accepted Answer · 2020-07-29 11:34:34Z

You can simply use forEach function with event Delegation for your dynamically added buttons.

Also you need use jQuery .append() function which will add all the button in the .check class. Using .html will replace the last one only shows the last button.

Run snippet below. Clicks are working on each one.

let Array1 = [{
    name: "try1",
    id: "id1",
    symbol: "symbol1"
  },
  {
    name: "try2",
    id: "id2",
    symbol: "symbol2"
  },
  {
    name: "try3",
    id: "id3",
    symbol: "symbol3"
  },
  {
    name: "try4",
    id: "id4",
    symbol: "symbol4"
  },
  {
    name: "try5",
    id: "id5",
    symbol: "symbol5"
  }
]

   //Loop through the array1
Array1.forEach(function(data) {
  //Append Each button
  $(".check").append(`<a id="${data.id}" class="btn btn-info myBtn" href="#" role="button">${data.id}</a><br>`)

})
 
//Click function on buttons
$(document).on('click', '.myBtn', function() {
   //get the id
  let getId = $(this).attr('id')

  //do something

  //Console
  console.log(getId)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="check">
</div>

Greedo · Accepted Answer · 2020-07-29 11:22:23Z

0

You can use a passive listener:

let Array1 = [
    {name:"try1", id:"id1", symbol:"symbol1"},
    {name:"try2", id:"id2", symbol:"symbol2"},
    {name:"try3", id:"id3", symbol:"symbol3"},
    {name:"try4", id:"id4", symbol:"symbol4"},
    {name:"try5", id:"id5", symbol:"symbol5"}
]

Array1.map(data => $(".check").append(`<a id="${data.id}" class="btn btn-info new-btn" href="#" role="button">${data.id}</a><br>`))

$(document).on("click", ".new-btn", (e) => console.log(e.target.id))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="check"></div>

answered Jul 29, 2020 at 11:22

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Comments

Sivakumar Tadisetti · Accepted Answer · 2020-07-29 11:23:19Z

0

let Array1 = [{
    name: "try1",
    id: "id1",
    symbol: "symbol1"
  },
  {
    name: "try2",
    id: "id2",
    symbol: "symbol2"
  },
  {
    name: "try3",
    id: "id3",
    symbol: "symbol3"
  },
  {
    name: "try4",
    id: "id4",
    symbol: "symbol4"
  },
  {
    name: "try5",
    id: "id5",
    symbol: "symbol5"
  }
];

Array1.forEach(({
  id
}) => {
  $(".check").append(`<a id="${id}" class="btn btn-info" href="#" role="button">${id}</a>`);
  $('#' + id).on('click', function(e) {
    e.preventDefault();
    console.log($('#' + id).text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="check"></div>

answered Jul 29, 2020 at 11:23

Sivakumar Tadisetti

5,0617 gold badges39 silver badges62 bronze badges

5 Comments

Always Helping Over a year ago

using forEach will do the job why use map and foreach together. Less code is always better.

Always Helping Over a year ago

After realising others answers are better and using forEach

Sivakumar Tadisetti Over a year ago

@AlwaysHelping after realising means?

Always Helping Over a year ago

Means you have seen answers above and changed your code as well. Simple as. Anyways all good.

Sivakumar Tadisetti Over a year ago

@AlwaysHelping I realized wrong in my answer itself so updated it. No need to copy it.

Collectives™ on Stack Overflow

Jquery .map Click Event on specific Element

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related