js动态加载数据后，子元素的事件仍然有效-优快云博客

事件委托

<ul id="todoList" class="todo-list">
  <li class="todo-item">学习事件委托 <button class="delete-btn">删除</button></li>
  <li class="todo-item">编写原生JS代码 <button class="delete-btn">删除</button></li>
</ul>
<button id="addItem">添加新项</button>

// 获取父元素
const todoList = document.getElementById('todoList');
 
// 绑定事件委托
todoList.addEventListener('click', function(e) {
  // 委托给删除按钮
  if (e.target.matches('.delete-btn')) {
    // 获取待删除项（按钮的父元素）
    const todoItem = e.target.parentElement;
    // 删除元素
    todoItem.parentNode.removeChild(todoItem);
  }
});
 
// 动态添加新项
document.getElementById('addItem').addEventListener('click', function() {
  const newItem = document.createElement('li');
  newItem.className = 'todo-item';
  newItem.innerHTML = '新的待办事项 <button class="delete-btn">删除</button>';
  todoList.appendChild(newItem);
});

document.getElementById('todoList').addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
        console.log('Clicked on li');
    }
});

$('code').click(function () {
    console.log($(this).text());
});
//按照这个写法，动态加载数据后，后加载的数据 事件失效。可以用下面的写法
$('.container').on("click", "code", function () {
　　console.log($(this).text());
});

    <div id="btns">
        <input type="button" class="btn" value="点我1">
        <input type="button" class="btn" value="点我2">

    </div>

    <script>
        $(function(){
            $('.btn').click(function(){
                alert('您点到我了');
            })

            //事件委托
            //通过现有的祖先元素，给其后代元素绑定事件
            //对未来元素（绑定事件时页面还没有的元素，后来通过js追加到页面的元素）生效
            $('#btns').on('click','.btn',function(){
                alert('我是按钮');
            });
             //注意：节点方式操作 和 innerHtml不同
           
            //节点方式的操作，原来的标签没有被改变，事件还在
            var input=$('.btn')[0].cloneNode() ;
            input.value='点我3';
            $('#btns')[0].appendChild(input);
            //使用innerHTML 重新替换内容，会将事件丢失
            $('#btns')[0].innerHTML+=' <input type="button" class="btn" value="点我4">';

            $('#btns').append( $(' <input type="button" class="btn" value="点我5">') )

        })
        
    </script>