jquery - 按钮正常，但 href 链接不触发

Question

我有 JQuery 代码：

$("#step1Skip").on("click", function(event){
    $('#chooseTheme, #addImages, #addVideo, #finalStep').hide();
    $('#addLogo').show();
});

如果我使用按钮，例如

<button type="button" id="step1Skip">Skip this step >></button>

这工作正常。但是，如果我尝试使用简单的链接进行相同操作：

<a href="#" id="step1Skip">Skip this step</a>

它什么都不做，根本行不通。这是为什么？

我不会同时尝试它们，所以这不是 ID 问题。

Answer 1

您的浏览器正在尝试访问该链接。尝试使用.preventDefault()

$("#step1Skip").on("click", function(event){
    event.preventDefault();
    $('#chooseTheme, #addImages, #addVideo, #finalStep').hide();
    $('#addLogo').show();
});

这将防止发生链接的默认操作。

Answer 2

由于它是一个链接，因此该链接正在执行它的默认操作。您需要阻止它这样做，并使用preventDefault()

$("#step1Skip").on("click", function(event){
    event.preventDefault();
    $('#chooseTheme, #addImages, #addVideo, #finalStep').hide();
    $('#addLogo').show();
});

另一个注意事项 - 这仅对<a>. 由于按钮没有默认操作，因此它们不受阻碍使用event.preventDefault()

看看http://api.jquery.com/event.preventDefault/

此问题有助于了解默认操作如何与链接一起使用。