jquery - location.href 不适用于按钮

Question

我想用一个按钮分配下面的功能，但由于某种原因，该功能中的“location.href”部分不起作用。如果我从按钮更改为 div 它可以工作，所以问题似乎出在按钮上。

为什么它不起作用，有没有办法解决它（我真的想使用一个按钮）？

<button id="back">Cancel</button> // Doesn't work
<div id="back">Cancel</div> // Works

    $('#back').click(function(){
        var imageId = $('#id').attr('href');
        var id = imageId.split('/');
        location.href = '/blog/' + id[3];
    });

Answer 1

您的问题不是按钮，您的问题是当您将单击绑定到具有默认行为的元素（如 a linkor button）时，浏览器会执行脚本但首先开始遵循默认行为。

您可以使用 return false;来防止触发默认行为，也可以防止与元素相关的其他操作冒泡：

请参阅此工作小提琴示例！

$('#back').click(function(){
    return false;  // prevent the regular click action for the element
    alert('bubu'); // this will not run
});

或者您用于 .preventDefault();仅阻止默认行为但执行与元素关联的其他操作：

请参阅此工作小提琴示例！

$('#back').click(function(event){
    event.preventDefault(); // prevent the regular click action for the element
    alert('bubu'); // this will run
});

这里有一篇关于这个主题的好文章！

Answer 2

好的，我设法自己解决了。问题是您显然需要添加“preventDefault();” 如果您使用按钮让“location.href”工作。

我修改后的现在可以工作的代码是：

    $('#back').click(function(e){
        e.preventDefault();
        var imageId = $('#id').attr('href');
        var id = imageId.split('/');
        location.href = '/blog/' + id[3];
    });

Answer 3

似乎它是一个 ID 而不是类问题？我用 ID 尝试了这个示例，但它不起作用，但切换到类，它很好。

http://jsfiddle.net/rexzc/

Answer 4

如果单击按钮，将尝试提交表单或文档，您可以使用 type='button' 属性来防止这种情况。