Jquery.map 特定元素的点击事件

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 !!

Answer 1

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>

Answer 2

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>

Answer 3

 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>