Question

I have an ASP.NET MVC application with pages where the content is loaded into divs from client via JavaScript/jQuery/JSON. The loaded content contains a-tags with references to a function that updates server side values, then redirects to reload of entire page even though.

I wish to replace the a-tags with ‘something’ to still call a server-side function, then reload the div only.

What is the ‘right’ way of doing this?

All comments welcome.

This is as far as I got so far. getResponseCell() returns a td-tag filled with a-tag.
I’ve mangled Glens suggestion into the .click() addition, but it just calls the onClickedEvent…

Code sample:

    onClickedEvent=function()
    {
        return false;
    }

    getResponseCell=function(label, action, eventId)
    {
        tmpSubSubCell=document.createElement("td");
        link = document.createElement("A");
        link.appendChild( document.createTextNode( label));
        link.setAttribute("href", "/EventResponse/"+ action + "/" + eventId);
        //link.setAttribute("href", "#divContentsEventList");
        //link.setAttribute("onclick", "onClickedEvent(); return false;");
        link.setAttribute("className", "eventResponseLink");
        
        
        link.click(onClickedEvent());
            
        // link=jQuery("<A>Kommer<A/>").attr("href", "/EventResponse/"+ action + "/" + eventId).addClass("eventResponseLink");
        // link.appendTo(tmpSubSubCell);
        tmpSubSubCell.appendChild(link);
        
        return tmpSubSubCell;
    }

---

And the solution that worked for me looks like this:

    onClickedEvent=function(event, actionLink)
    {
            event.preventDefault(); 

            $("eventListDisplay").load(actionLink);

            refreshEventList();                

            return false;
    }

    getResponseCell=function(label, action, eventId)
    {
        tmpSubSubCell=document.createElement("td");
        link = document.createElement("A");
        link.setAttribute("id",action + eventId);
        link.appendChild( document.createTextNode( label));
        actionLink = "/EventResponse/"+ action + "/" + eventId;
        link.setAttribute("href", actionLink);
        className = "eventResponseLink"+ action + eventId;
        link.setAttribute("className", className);

        $('a.'+className).live('click', function (event)
            {
                onClickedEvent(event,$(this).attr('href'));
            });

        tmpSubSubCell.appendChild(link);
        
        return tmpSubSubCell;
    }
    

Answer 1

Without really seeing more information…..

If you’re a’s are being added to the DOM after the initial page load, you cannot use the usual click() or bind() methods in jQuery; this is because these methods only bind the events to those elements that are registered in the DOM at the time the methods are called. live() on the other hand, will register the event for all current, and future elements (using the event bubbling mechanism in Javascript).

$(document).ready(function () {
    $('a.eventResponseLink').live('click', function (event) {
        var self = $(this);

        self.closest('div').load('/callYourServerSideFunction.asp?clickedHref=' + self.attr('href'));

        event.preventDefault();
    });
});

We’re using event.preventDefault() to prevent the default action of the a-tag being executed; e.g. reloading or changing page.

Edit: The issue won’t be caused by that. That’s the power of jQuery; being able to bind the same event to multiple elements. Check your HTML; maybe you’re missing a closing </a> somewhere? Maybe your binding the event in a location that gets called multiple times? Each time .live() gets called, it will add ANOTHER event handler to all matched elements. It only needs to be bound once on page load.

jQuery provides loads of way for you to select the elements; check out the list. Looking at your link variable, it looks like all your links have a href starting with /EventResponse/; so you can use $('a[href^=/EventResponse/]') as the selector instead.