动态生成元素的事件处理

appendTo()

将动态生成的元素添加到指定的目标元素中作为子元素

html：

<div class="target-element"></div>

jQuery：

$('<div class="dynamic-element">...</div>').appendTo('.target-element');

var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$(html).appendTo('.target-element');

append()

将动态生成的元素添加到指定的父元素中

html：

<div class="parent-element"></div>

jQuery：

$('.parent-element').append('<div class="dynamic-element">...</div>');

var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$('.parent-element').append(html);

on()

使用事件委托机制绑定事件处理程序，可以捕获动态生成元素的事件

使用 .on() 方法绑定事件时，应该选择一个静态的父元素，并通过选择器指定目标动态生成的元素。这样可以确保事件处理程序能够捕获到动态生成元素的事件。

对动态生成的元素进行操作，应该确保在元素已经生成并添加到 DOM 树中后再执行相应的操作，以避免操作无效。

$(document).on('click', '动态生成的元素的选择器', function() { ... });

$(父元素的选择器).on('click', '动态生成的元素的选择器', function() { ... });

html：

<div class="news-box"></div>

jQuery：

var html = 
`
<ul>
    <li>新闻11111</li>
    <li>新闻22222</li>
    <li>新闻33333</li>
    <li>新闻44444</li>
</ul>
`;

$('.news-box').append(html);

$('.news-box').on('click', 'ul li', function(e){
    console.log('点击某条新闻')
    console.log(this);				// <li>新闻11111</li>
    console.log(e.target);			// <li>新闻11111</li>
    console.log($(this).index())	// 0
});

live() 方法在旧版本的 jQuery 中用于绑定事件处理程序，包括对动态生成的元素的事件进行绑定。然而，自 jQuery 版本 1.7 起，live() 方法已被废弃，不再推荐使用。

remove()

从 DOM 中移除动态生成的元素

$('.dynamic-element').remove();

empty()

清空动态生成元素的内容

$('.dynamic-element').empty();

原创不易，转载请注明本文出处及原文链接。

点赞，如果这篇文章对您有帮助，请点个赞，将是我创作的动力！

收藏，如果觉得这篇文章有参考价值，请收藏起来，方便以后阅读。

评论，欢迎在评论区与我分享您的想法和建议，将是对我最大的支持和鼓励。