jquery - 未由附加事件处理程序触发的元素

Question

我有<div id="pause"><img id="pausimg" src="bla" /></div>一个按钮，它会触发我以下事件：

$('#pause').on('click', pause);
$('#play').on('click', play);

function pause() {
    $slider.cycle('resume'); 
    $('#pausimg').attr('src', 'images/pause.png'); 
    $(this).attr('id', 'play');
}

function play() { $slider.cycle('pause');
     $('#pausimg').attr('src', 'images/play.png');
     $(this).attr('id', 'pause');
}

如您所见#play，单击按钮时不存在。但点击它后，处理程序play()应该触发。但它似乎不知道#play即使我检查日志id实际上是 #play

谢谢

Answer 1

工作 jsFiddle 演示

使用事件委托：

$('body').on('click', '#pause', pause);
$('body').on('click', '#play', play);

---

参考：

• .on()- jQuery API 文档

Answer 2

使用容器进行事件委托：

HTML

<div id="controlsContainer">
   <div id="pause"><img id="pausimg" src="bla" /></div>
</div>

jQuery

$('#controlsContainer').on('click', '#pause', pause);
$('#controlsContainer').on('click', '#play', play);