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

好的，我自己设法解决了。问题是你显然需要添加'preventDefault（）;'如果你使用按钮让'location.href'工作。

我修改过的现在正在运行的代码是：

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

Answer 2

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

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

请参见此工作Fiddle Example！

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

或您使用 .preventDefault();仅阻止默认行为，但执行与该元素相关的其他操作：

请参见此工作Fiddle Example！

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

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

Answer 3

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

http://jsfiddle.net/rexzc/

Answer 4

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

location.href不适用于按钮

4 个答案: