Question

怎样处理jQuery动态添加元素时无法触发绑定事件

Answer 1

这个要用到“事件委托”，就是把动态添加的元素的事件委托给它的父元素（非动态的）去处理，这样的话不管其子元素如果动态添加，都能捕捉其事件。具体你自己百度“事件委托”或“事件代理”

Answer 2

<div class="list"></div>

$(function () {

    console.log('start...')
    // 用setTime模拟ajax数据请求（都是异步的）
    setTimeout(function () {
        $('.list').append(`<div class="item">1</div>`);
        console.log('最后才输出');
    }, 1000)

    console.log($('.item')); // length: 0
    $('.item').click(function () {
        console.log('....');
    });

    console.log('end....');

    // js在运行时是从上往下执行的，碰到异步操作会先跳过，先执行下面的同步代码

    // 现在分析下上面的代码
    // 1. console.log('start...') // 同步，执行并输出（start...）

    // 2. 用setTimeout模拟ajax数据返回，异步操作，先不执行。。。先执行下一步
        // 可以理解成这个操作先放到外面排队着

    // 3. console.log($('.item')) ,我们先输出$('.item')，发现jquery的元素节点长度为0.。。。也就是没找到

    // 4. $('.item').click() // 这个其实是两个步骤
        // 1.先执行$('.item') ，发现这是一个同步操作，好，我们去找元素吧。。。嗯，没找到
        // 2.click() ,嗯，异步的，丢到外面排队着
    // 5.  console.log('end....'); // 嗯，同步的执行

    // 6. 同步的执行完了，外面排队的可以执行了，

    // 7. setTimeout()执行，向div.list添加子节点 div.item

    // 8. $('.item')去触发事件，嗯，什么鬼 $('.item')空的，那触发不了了

    // 问题解决（将item的事件绑定到list，这样当进行$('.list)是有值的）
    $('.list').on('click', '.item', function () {
        console.log('找到了')
    })
})

有什么不对的可以指出下