jquery adding an onclick event to a href link

Question

i am converting over from websforms to asp.net mvc and i have a question.

i have a loop that generates links dynamicallly where picNumberLink is a variable in a loop and image is a variable image link.

i want to avoid putting javascript actions inline so in my webforms project is did the following:

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

what is the equivalent using jquery in asp.net mvc?

I have seen examples of using the $(document).ready event to attach on clicks but i can't figure out the syntax to pass in the picNumberLink variable into the javascript function.

suggestions?

ankitkanojia · Accepted Answer · 2020-01-30 10:36:24Z

10

EDIT: If you generate your links with the ID of this form:

<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>

edited Jan 30, 2020 at 10:36

ankitkanojia

3,1224 gold badges24 silver badges37 bronze badges

answered Aug 13, 2009 at 10:20

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

leora Over a year ago

where does picNumberLink come from since this is a variable?

karim79 Over a year ago

@me - does that make more sense now?

leora Over a year ago

maybe that is my issue / question. I just have an image so where can i shove the picNumber into so i would be able to grab it from javascript? i am not displaying the text

karim79 Over a year ago

@me - then see my answer. If you give your picture links the class="picLinks" that will do it.

leora Over a year ago

but i am not displaying any text in my link . . just the image.. if the number was in the text it would be perfect but its not

|

DBS · Accepted Answer · 2025-04-08 16:25:52Z

2

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

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

If you need to get URL of picture, keep it in anchor`s href:

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

edited Apr 8 at 16:25

DBS

10.1k4 gold badges40 silver badges61 bronze badges

answered Aug 13, 2009 at 10:20

Arnis Lapsa

47.6k30 gold badges119 silver badges198 bronze badges

4 Comments

leora Over a year ago

my question is around how i can have the javascript pic up the picNumberLink variable now that its not inline

Arnis Lapsa Over a year ago

Add it to hidden field next to link, then - in functionIWantToCall use "var picNumberLink = wrappedLink.next().val()"

leora Over a year ago

that seem like a kluge but if there is no more elegant way then thanks for the idea. what would be the syntax of it, just a regular hidden html tag

Arnis Lapsa Over a year ago

Rigobert Song · Accepted Answer · 2009-08-13 10:27:33Z

1

$(document).ready(function()
{

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

});

You can add an attribute called picNumber to your hyperlink tag and set this is your mvc view

The link in your view might look something like this:

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

answered Aug 13, 2009 at 10:27

Rigobert Song

2,8122 gold badges31 silver badges49 bronze badges

2 Comments

kͩeͣmͮpͥ ͩ Over a year ago

$(document).ready(function(){}) can be abreviated to $(function(){})

leora Over a year ago

for this to work, would i need the following <a href="" picNumber+'3'><img src=".."></a>

searlea · Accepted Answer · 2009-08-13 10:45:15Z

1

Assuming you're able to change the HTML you output, can't you put the picNumberLink in the id or class attribute?

HTML:

<a href="..." id="piclink-242" class="view foo-242"><img src="..."/></a>

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]);
  });
}}

answered Aug 13, 2009 at 10:45

searlea

8,4284 gold badges37 silver badges38 bronze badges

1 Comment

searlea Over a year ago

Just realised this is very much like karim79's answer... I think we need to see me's HTML

Collectives™ on Stack Overflow

jquery adding an onclick event to a href link

4 Answers 4

7 Comments

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related