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>')
    })
})

小提琴：http://jsfiddle.net/eV4rX/

Answer 1

需要将其包裹在<li>：

中

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

更新了小提琴：http://jsfiddle.net/eV4rX/1/

Answer 2

你可以简单地

$('#b').on('click', 'a', function(){ alert('works')})

而不是

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

http://jsfiddle.net/eV4rX/3/

Answer 3

它与on（）无关，与你追加的标记有关。将<a>包裹在<li>中，使其与您的第二个选择器匹配。

http://jsfiddle.net/TJ8Yy/

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

Answer 4

首先你应该将li附加到列表中你的jquery

$(document).ready(function(){
    $('#a').find('.a1').on('click', function(){ alert('works1');});
    $('#b').on('click', 'a', function(){ alert('works2')})

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

DEMO

Answer 5

这是你的答案：

$('#list').on('click', '.b2', function() {
     alert('works');
});

jQuery on（）不为动态元素射击

5 个答案: