Question

设置对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>' ;
}

我想使用id向此代码中的每个列表项添加不同的单击功能。感谢这个伟大的社区，任何建议都会有所帮助。

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元素。例如：对于element1

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

Answer 3

您可以将click事件附加到父元素（在本例中为<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>

如何在jquery和html中向动态创建的列表项添加点击？

3 个答案: