如何添加点击动态创建的jQuery和HTML列表项？ [重复]

Question

这个问题已经在这里有一个答案：

• Click event doesn't work on dynamically generated elements [duplicate] 20个答案

上点击设置在jQuery的动态添加的HTML元素时，我得到一个错误。首先，我应该说，我搜索了很多在这个社区，但我得到更多的困惑。

这里是我的代码：

var data = ['element1','element2','element3'] ;
var html = '' ;
for(let i = 0;i<data.length ; i++){
    const element = data[i]; 
    html += '<li id="'+element+'">'+element+'</li>' ;
}

我想不同的点击功能在使用IDS该代码添加到每个列表项。任何建议将是有益的，感谢这个伟大的社会。

Answer 1

下面是使用普通的JavaScript展示如何附上这样的点击处理程序应用到动态创建的元素的例子。

首先，你需要创建li的使用document.createElement，然后设置你的li的文本内容和ID。单击处理可通过设置onclick财产或使用addEventListener方法添加。

一旦你的li设置，你就必须把它添加到一个容器，这里的列表<ul>。

const elements = ['element1','element2','element3'];
const handlers = [
    () => console.log('hello 1'),
    () => console.log('hello 2'),
    () => console.log('hello 3')
];

const content = document.getElementById('content');

elements.forEach((id, i) => {
  const li = document.createElement('li');
  li.id = id;
  li.textContent = `Hello ${i}`;
  li.addEventListener('click', handlers[i]);;
  content.appendChild(li);
});

<ul id="content"></ul>

Answer 2

您可以使用文件选择器，用于动态创建DOM元素。例如：对于部件1

$(document).on("click","#element1",function(){
//your code snippet
});

Answer 3

您可以在父元素上附加的点击事件，在这种情况下，<ul>元素。 jQuery中，所述.on()函数具有其可以是在这种情况下，selector第二li参数。

在回调函数，你可以使用$(e.target).attr('id')找到被点击当前元素的id。这可以用来采取基于其价值适当的行动。

请参见下面的代码。

var data = ['element1', 'element2', 'element3'];
var html = '';

html += '<ul id="ulElement">';
for (let i = 0; i < data.length; i++) {
  const element = data[i];
  html += '<li id="' + element + '">' + element + '</li>';
}
html += '</ul>';

$('#content').html(html);

$('#ulElement').on('click', 'li', function(e) {
  var clickId = $(e.target).attr('id');
  console.log(clickId)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>