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>