javascript - 如何使用委托(delegate)事件？

Question

我正在使用一个事件来替换某些层中的“src”属性(<div class="total-title" src="anURL">):

$('.playOnAP').on('click',function() {
    $('#mp3-list ul li',this).each( function( index, element ) {
    $('.total-title').eq(index).attr('src', $(this).text() );
});     

它第一次工作，但不是在 Ajax 请求之后，当 $('.playOnAP')元素被替换。我猜我应该使用 Delegated Events ，但不要让自己清楚。

我试过下一个:

$('.playOnAP').on('click','#mp3-list ul li',function() {
$('.playOnAP #mp3-list ul li').on('click',function() {
$('.playOnAP #mp3-list ul li').on('click','#mp3-list ul li',function() {

但不起作用。

Answer 1

试试这个:

$(document).on('click', '.playOnAP',function() {

当使用事件委托(delegate)时，您必须将事件绑定(bind)到最初位于 DOM 中的元素。如果某些内容已被动态替换，则您无法绑定(bind)到它。

正如 Anup 深刻提到的那样，将点击事件绑定(bind)到 document 并不是绝对必要的——任何父元​​素都可以，只要它最初位于 DOM 中即可。

例如，如果 .playOnAP 是被替换的最顶层容器元素:

<div id="someDiv">
    <div class="playOnAP">
        //some stuff here
    </div>
</div>

你可以使用:

$('#someDiv').on('click', '.playOnAP', function() { //do your stuff });

不过，默认情况下，您几乎总是可以使用 $(document).on()(即使只是作为快速检查以确保一切正常，然后再缩小到最合适的范围元素)。