在HTML页面中的另一个链接项中创建链接

Question

我使用Twitter Bootstrap创建网站。

本网站的其中一个页面显示了一个项目列表。

在每个项目框中，右侧有一个x，用户应该可以单击该列表以从列表中删除该项目。此外，单击列表项的常规区域会链接到该项唯一页面。

请参阅我准备的JSFiddle：

JSFiddle Link

问题是因为我似乎无法在x上添加链接。如果我尝试使用

围绕x

<a href="item2/delete">....</a>

布局分崩离析，您可以看到here。

由于我使用的是Bootstrap，我一直坚持使用基本上由链接组成的列表（即<a>标签）。尽管如此，我有没有办法在其中加入像我x这样的链接？

我已尝试使用Jquery专门为x创建一个监听器，但它仍然无效（单击x会将您带到该项目的链接）。

请帮忙！

Answer 1

您可以添加onclick事件处理程序并阻止导致页面重定向的默认onclick事件。试试这个，我在你的第二个“X”按钮上添加了一个id。

$('#linkTo').click(function(event){
    event.preventDefault();
    alert('hello');
});

DEMO

我想这就是你想要的。

Answer 2

检查演示，是你在寻找

FIDDLE DEMO

$(function(){
    $('.glyphicon-remove').on('click',function(){

        return false;
    })
})

Answer 3

您可以使用相对包装+绝对链接关闭按钮，如下所示：

<div class='wrap'>
            <a href="/proj/item/1" class="list-group-item"> 
                <img class="" style="float: left; padding-right: 20px;" src="http://www.clinicalflow.com/skins/common/icons/icon-check.gif" />
                <h4 class="list-group-item-heading">item 1</h4>         
                 <p class="list-group-item-text">Avail. since: 01/01/01</p>
            </a>
                <a hrerf='#' onclick="alert('assign delete link in href');" class="glyphicon glyphicon-remove"></a>
            </div>  
 <style>
.wrap{
    position:relative;
}
.glyphicon{
    position:absolute;
    right: 50px; top: 30px;
    width: 10px; height:10px;
    cursor:pointer;
}  
 </style>

js fiddle sample: http://jsfiddle.net/52VtD/8026/