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

Question

你好，我有一个这样的数组：

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"}
]

我想让他们每个人都成为一个按钮。 我可以点击每一个。 为此，我使用 map 函数（我不确定这是最好的选择）

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

直到现在我得到 5 个按钮。 1 个按钮，每个 object 带有按钮的 ID。

问题从这里开始：我试图在这个按钮上捕捉一个点击事件。 我做不到..

我试过：

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

我很乐意寻求帮助或以任何其他方式获得相同的结果。 谢谢！

Answer 1

您可以简单地将forEach function 与事件委托一起用于动态添加的buttons 。

您还需要使用 jQuery .append() function 这将在.check class 中添加所有按钮。使用.html将替换最后一个只显示最后一个按钮。

运行下面的代码片段。 Clicks对每一个都有效。

 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

您可以使用被动侦听器：

 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>