jQuery替换元素id，但稍后无法识别

Question

我有一个播放按钮和一个前进按钮。

HTML 是这样的:

<div id="control">
    <a href="#" id="pause"></a>
    <a href="#" id="next"></a>
</div>

我想要的是，当有人单击“暂停”时，会出现一个播放图标，当他们单击“播放”时，会再次出现暂停图标。现在这可以通过切换来完成，但我还需要当有人单击“下一步”时出现播放图标，以及当他们单击“播放”图标时出现暂停图标。切换对此不起作用。

这是我的 jQuery，显然，由于 javascript 的性质，这是行不通的。 (添加的属性播放无法识别)

对于我正在尝试做的事情，什么是好的解决方案？

// Play/pause is clicked, alternate between starting and stopping the interval 

$('#pause').click(function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)");
    $(this).attr('id', 'play');
});

$('#play').click(function(event) {
    $(this).css("background-image", "url(../images/controls_pause.png)");
    $(this).attr('id', 'pause');
});


$('#next').click(function(event) {
    $('#pause').css("background-image", "url(../images/controls_play.png)");
    $('#pause').attr('id', 'play'); 
});

Answer 1

您可以使用.delegate()对于您的播放/暂停处理程序，如下所示:

$('#control').delegate("#pause", "click", function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)")
           .attr('id', 'play');
}).delegate("#play", "click", function(event) {
    $(this).css("background-image", "url(../images/controls_pause.png)")
           .attr('id', 'pause');
});

You can test it out here 。现在，不再是在页面加载时查找具有匹配 ID 的控件，而是监听 click 事件并在事件发生时检查 ID，这将为您提供 Action 改变的预期效果。请注意，这比 .live() 更有效。因为你确切地知道元素在哪里。