jquery将onclick事件添加到href链接答案

【问题标题】：jquery adding an onclick event to a href linkjquery将onclick事件添加到href链接
【发布时间】：2009-08-13 10:15:44
【问题描述】：

我正在从 websforms 转换为 asp.net mvc，我有一个问题。

我有一个动态生成链接的循环，其中 picNumberLink 是循环中的变量，而 image 是可变图像链接。

我想避免将 javascript 操作内联，因此在我的 webforms 项目中执行以下操作：

hyperLink.Attributes.Add("onclick", "javascript:void(viewer.show(" + picNumberlink + "))");

在 asp.net mvc 中使用 jquery 的等价物是什么？

我已经看到使用 $(document).ready 事件附加点击的示例，但我无法弄清楚将 picNumberLink 变量传递给 javascript 函数的语法。

建议？

【问题讨论】：

标签： asp.net jquery asp.net-mvc

【解决方案1】：

编辑：如果您使用此表单的 ID 生成链接：

<a id="piclink_1" class="picLinks">...</a>
<a id="picLink_2" class="picLinks">...</a>

<script type="text/javascript">
    $('a.picLinks').click(function () {
        //split at the '_' and take the second offset
        var picNumber = $(this).attr('id').split('_')[1];
        viewer.show(picNumber);
    });
</script>

【讨论】：

picNumberLink 从何而来，因为这是一个变量？
@me - 现在更有意义了吗？
也许这是我的问题/问题。我只有一张图片，所以我可以将 picNumber 推到哪里，这样我就可以从 javascript 中获取它了？我没有显示文字
@me - 然后看看我的回答。如果你给你的图片链接 class="picLinks" 就可以了。
但我的链接中没有显示任何文本。 .只是图像..如果数字在文本中，那将是完美的，但不是

【解决方案2】：

var functionIWantToCall = function(){
    var wrappedLink = $(this);
    //some serious action
}

//this should be called on document ready
$("#myLinkId").click(functionIWantToCall);

如果需要获取图片的URL，请保存在anchor的href中：

var functionIWantToCall = function(event){
    event.preventDefault(); //this one is important
    var link = $(this).attr('href');
    //some serious action
}

【讨论】：

我的问题是，既然 picNumberLink 变量不是内联变量，我该如何让 javascript PIC 获取它
将其添加到链接旁边的隐藏字段中，然后 - 在 functionIWantToCall 中使用“var picNumberLink = WrappedLink.next().val()”
这似乎是一个 kluge，但如果没有更优雅的方式，那么感谢你的想法。它的语法是什么，只是一个普通的隐藏 html 标签

【解决方案3】：

$(document).ready(function()
{

$('#LinkID').click(function() {
    viewer.show($(this).attr('picNumber'));
});

});

你可以在你的超链接标签中添加一个名为 picNumber 的属性，并设置这是你的 mvc 视图

您视图中的链接可能如下所示：

<%= Html.ActionLink("Index", new { id = "LINKID", picNumber = 1 }) %>

【讨论】：

$(document).ready(function(){}) 可以简写为 $(function(){})
为此工作，我需要以下

【解决方案4】：

假设您能够更改您输出的 HTML，您不能将 picNumberLink 放在 id 或 class 属性中吗？

HTML：

&lt;a href="..." id="piclink-242" class="view foo-242"&gt;&lt;img src="..."/&gt;&lt;/a&gt;

jQuery:

$(function() {
  // using the id attribute:
  $('.view').click(function() {
    viewer.show(+/-(\d+)/.exec(this.id)[1]);
  });

  // or using the class attribute:
  $('.view').click(function() {
    viewer.show(+/(^|\s)foo-(\d+)(\s|$)/.exec(this.className)[2]);
  });
}}

【讨论】：

刚刚意识到这很像 karim79 的回答...我想我们需要看看 me 的 HTML