特定元素上的 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 Funnction（我不确定这是最好的选择）

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

到目前为止，我得到了 5 个按钮。 1 按钮每个对象与按钮的 id。

问题从这里开始：我试图在此按钮上捕获单击事件。我做不到..

我试过了：

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

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

Answer 1

您可以简单地将forEach 函数与event Delegation 一起用于动态添加的buttons。

您还需要使用 jQuery .append() 函数将所有按钮添加到 .check 类中。使用.html 将替换最后一个只显示最后一个按钮。

在下面运行 sn-p。 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>