行级超链接表现得很有趣

Question

开发ASP.NET / MVC5网站。使用jQuery FooTable。对于数据驱动表中的每一行，我都有一些“动作”图标。其中一个图标会显示“快速查看”摘要表，其中包含人员信息。这就是它的样子......

快速查看（眼球）图标定义为...

<a href="#" title="Quick Look" data-toggle="popover" 
    data-trigger="focus" data-html="true" data-content="@quicklook">
    <i class="fa fa-eye" aria-hidden="true"></i>
</a>

变量@quicklook定义为....

 var quicklook = "<table>" +
    "<tr><td style='width:75px;'>Name:</td><td><b>" + 
    @cust.Value.FirstName + ' ' + @cust.Value.LastName + 
    "</b></td></tr>" +
    "<tr><td>DOB:</td><td><b>" + @cust.Value.DOB + 
    "</b></td></tr>" +
        :
      etc. etc.

所以，你可以看到我也在使用razor语法。弹出窗口效果很好直到我在网格/屏幕上选择一些较低的行。然后，当我点击按钮时，它会跳到页面顶部，我看不到我的“快速查看”信息框。有什么想法吗？我想这是因为href =“＃”。但是，我不知道如何解决这个问题。我尝试为每个表行创建一个具有唯一行号的ID，然后在我的href中跳转到那个，但是效果不好。有任何想法吗？

谢谢！

Answer 1

有以下选项：

1. 在点击活动中定义return: false;。
2. 在点击活动中定义event.stopPropagation()。
3. 不要将眼睛作为一个链接并使用例如而是<div>。