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

<强> Working jsFiddle Demo

使用事件委托：

$('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);

元素不是由附加的eventhandler触发的

2 个答案: