location.href 不适用于按钮答案

【问题标题】：location.href doesn't work with buttonlocation.href 不适用于按钮
【发布时间】：2012-06-07 04:14:53
【问题描述】：

我想为下面的函数分配一个按钮，但由于某种原因，函数中的“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];
    });

【问题讨论】：

您的 DOM 中是否有一个以“id”作为 Id 的元素？
如果他没有，那么console.log(...) 也不起作用，不是吗？没有理由这不起作用。除非您在文档中同时具有 both 那些元素（共享id）。可以repro on JS Fiddle吗？

标签： jquery function button href

【解决方案1】：

您的问题不在于按钮，您的问题在于，当您将点击绑定到具有默认行为的元素（如 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！

【讨论】：

【解决方案2】：

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

我修改后的代码是：

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

【讨论】：

【解决方案3】：

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

http://jsfiddle.net/rexzc/

【讨论】：

谢谢，我实际上得到了它，即使有一个 id。但是，'location.href' 部分没有。

【解决方案4】：

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

【讨论】：