PreventDefault不会在第二次点击时触发

Question

我想在网页上创建一个播放/暂停按钮，单击该按钮可以在播放/暂停之间切换。我使用on函数创建了一个click事件来触发歌曲播放和暂停。但是，第一次单击会按预期完成所有操作，从而阻止了刷新页面的默认操作，但是在切换到暂停按钮后单击同一按钮时，它不会阻止默认操作。我尝试对它们使用 preventDefault（）甚至 stopPropagation（）和 return false ，但这仍然不起作用。我以为这与使用replaceWith（）并可能删除事件或某些东西有关，但是我不确定所有这些如何工作。

我还尝试将其重新设置为静音按钮等其他功能，并先播放暂停，但第一次单击时一切正常，但第二次则没有。

play = $('#play');
pause = $('#pause');

play.on('click', function(e) {
        e.preventDefault();
        song.play();
        $(this).replaceWith('<a class="button" id="pause" href="" title=""></a>');
        container.addClass('containerLarge');
        cover.addClass('coverLarge');

    });

    pause.on('click', function(e) {
        e.preventDefault();
        song.pause();
        $(this).replaceWith('<a class="button" id="play" href="" title=""></a>');
    });