防止默认不工作答案

【问题标题】：Prevent Default Not Working防止默认不工作
【发布时间】：2013-12-22 00:04:09
【问题描述】：

我正在开发音乐播放器，我相信我的阻止默认设置不起作用。当我点击播放时，一切正常。按钮切换到暂停按钮并播放音乐。但是，当我点击暂停时，页面会刷新。有什么想法吗？

谢谢！

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

});

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

});

【问题讨论】：

标签： javascript jquery preventdefault

【解决方案1】：

您正在用新元素替换元素。事件处理程序绑定到 old 元素，而不是新元素，并且存储在变量 play 和 pause 中的引用也将是旧的分离 DOM 元素。

您需要保留元素，并以编程方式隐藏/显示它们，而不是完全删除它们并用其他元素替换它们：

play.on('click', function (e) {
  e.preventDefault();
  play.hide();
  pause.show();
});

【讨论】：

或者像这样使用：$('body').on('click','#pause',function(e){
虽然我在下面提供了答案，但我不明白为什么您需要完全删除 DOM 元素。所以@Meagar 的回答更好。您应该简单地隐藏未从 DOM 中删除的元素。但是，如果您需要删除它们并重新添加它们，则可以选择将侦听器添加到 body 元素并查看事件发生的位置。

【解决方案2】：

$('body').on('click','#pause',function(e){
$('body').on('click','#play',function(e){

您没有提供 HTML，但这些应该可以工作。

【讨论】：