javascript動態新增監聽

Question

javascript動態新增監聽

Laravel動態產生按鈕button

php laravel

@foreach($result as $item)
<input type="button" name="btn" class="btn">
@endforeach

javascript如何新增監聽

javascript

var btn=document.getElementsByName('btn');
for(var i=0;i<btn.length;i++){
btn[i].addEventListener('click',function(e){
// 監聽事件
alert(i);
})
}

以上寫法,alert(i)只會出現同一個

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

问题：如何在 JavaScript 中动态新增监听事件？

解决方案：

1.在 HTML 中为元素添加 ID 属性，以便获取并操作元素。

2.在 JavaScript 中获取元素，可以使用 document.getElementByID() 或者 document.querySelector() 等方法。

3.使用 addEventListener() 方法来添加事件监听器。

4.动态添加的监听器应该放在一个函数中，该函数接收 event 参数，并在其中实现事件监听器的功能。

5.对于动态生成的元素，可以通过将事件监听器添加到它们的父元素上，并在监听器内部通过 event.target 判断实际触发事件的元素。

代码示例：

HTML:

<div id="container">
  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
</div>

JavaScript:

const container = document.querySelector('#container');
container.addEventListener('click', function(event) {
  if (event.target.classList.contains('btn')) {
    const index = Array.from(container.children).indexOf(event.target);
    console.log(`你点击了第 ${index + 1} 个按钮`);
  }
});

这个代码通过获取父元素 container，将事件监听器添加到 container 上。在监听器内部使用 event.target 判断触发事件的元素，并通过indexOf()方法计算出元素的位置，从而实现在点击按钮时输出点击的按钮序号的功能。