Question

I have a paging menu PartialView in my MVC app that looks like:

    <%  if (Model.TotalPages > 5) 
    {
        int index = Model.PageIndex;
        int minIndex = index - 2;
        int maxIndex = index + 2;
        if (index < 2) 
        { 
            minIndex = 0; 
            maxIndex = 4; 
        }
        if (index > Model.TotalPages - 2) 
        { 
            minIndex = Model.TotalPages - 5; 
            maxIndex = Model.TotalPages; 
        }
        for (int i = minIndex; i <= maxIndex; i++)
        { %>    
            <li>
                <span class="<%= Html.GetClass((i==index), "selected", "notselected") %>">
                    <a href="<%= Url.Action("TypeNav", "Catalog", new { controller = "Catalog", action = "TypeNav", group = Model.ProductGroup, position = 0, index = i, browseSize = 6 } ) %>" class="<%= Html.GetClass((i==index), "selected", "notselected") %>">
                        <%= i + 1%>
                    </a>
                </span>
            </li>
<%      } 
    } 
    else 
    {
        for(int i=0; i<Model.TotalPages; i++) { %>    
            <li>
                <span class="<%= Html.GetClass((i==Model.PageIndex), "selected", "notselected") %>">
                    <a href="<%= Url.Action("TypeNav", "Catalog", new { controller = "Catalog", action = "TypeNav", group = Model.ProductGroup, position = 0, index = i, browseSize = 6 } ) %> ">
                        <%= i+1 %>
                    </a>
                </span>
            </li>
<%      }
    } %>

What I cannot figure out is how to set a JQuery click event on the Anchor tags. Anchor tags do not have a NAME attribute and my (very) limited experience with JQuery is that it needs NAME attributes to work with.

Any pointers are quite welcome.

TIA

Answer 1

You can specify any CSS selector to get at your a tags and not just a name/ID. For example if you want all the anchor tags in your document to subscribe to your event something like

$("a").click(function() { /* Do magic */ });

would work. This does tend to mess up every other anchor tag on the page which might not be the effect you want either.

If you want to give your a tags a common behaviour its sometimes just easier to give them a custom CSS class so you can hook up events via a more simple selector

$(".pagerLink").click(function() { /* Do magic */ });

If you don’t like the thought of that an alternative is to give the containing UL tag an ID then use a descendent selector

$("#yourPager a").click(function() { /* Do magic */ });

or looking at your markup a child selector might also be feasible

$("span.selected > a, span.notselected > a")
      .click(function() {/* Do magic */ });

i.e. Look for all a tags that are immediate descendents of span tags that either have the selected class or the not selected class.

It’s worthwhile remembering you have to cancel the default behaviour of the a tag (e.g. navigating to your link) you can do this either by returning false from your event handler or using the jQuery event object and calling preventDefault