javascript - jQuery on() 不触发动态元素

Question

为什么在将元素添加到列表后不调用此点击处理程序？

<div id="a">
    <a href="#" class="a1">Test</a>
</div>

<div id="b">
    <div class="b1">
        <ul id="list">
            <li>
                <a href="#" class="b2">Test</a>
            </li>
        </ul>    
    </div>
</div>

<button id="btn">Add One</button>

这是JS:

$(document).ready(function(){
    $('#a').on('click', '> .a1', function(){ alert('works')})
    $('#b').on('click', '> .b1 > ul > li > .b2', function(){ alert('works')})

    $('#btn').click(function(){
        $('#list').append('<a href="#" class="b2">Test Added</a>')
    })
})

fiddle :http://jsfiddle.net/eV4rX/

Answer 1

它需要包裹在 <li> 中:

$('#list').append('<li><a href="#" class="b2">Test Added</a></li>')

更新 fiddle :http://jsfiddle.net/eV4rX/1/