当last也是动态创建的时候,可以通过事件委托的方式实现li的动态单击。
事件委托是指将事件绑定到父元素上,利用事件冒泡的机制,通过判断事件源来执行相应的操作。在这种情况下,可以将点击事件绑定到父元素上,然后通过判断点击的目标元素是否为li来执行相应的操作。
以下是一个示例代码:
HTML部分:
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript部分:
var list = document.getElementById('list');
list.addEventListener('click', function(event) {
var target = event.target;
if (target.tagName === 'LI') {
// 执行li的点击操作
console.log('点击了li:' + target.textContent);
}
});
在上述代码中,通过addEventListener方法将点击事件绑定到父元素ul上。当点击ul内的任意li元素时,事件会冒泡到ul元素,通过判断事件源的tagName是否为'LI',来确定是否点击了li元素。如果是,则执行相应的操作,例如在控制台输出li的文本内容。
这种方式可以适用于动态创建的li元素,无论是通过JavaScript动态创建还是通过后端渲染生成的。只需要将事件绑定到父元素上,无需为每个li元素单独绑定事件,提高了效率和代码的可维护性。
推荐的腾讯云相关产品:无
希望以上内容能够满足您的需求,如有其他问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云