jQuery stop working on updated page via Ajax in ASP.NET MVC

Question

Hi everyone!!

I have a ASP.NET MVC page of Events of a specific day. I'm also using jQuery datepicker and when I select a day, I create a function that send this selected day via Ajax to a MVC ActionResult method and this method will treat this day, will do all the database stuff and will return me all the Events of this selected day. So far, so good...

After that, I was trying to use jQuery cluetip to show me some Events details via Ajax and this also worked... partially!!!

Why partially?? When I load the page for the first time (and in all first times), the tips worked great and all the Ajax stuff! And in all first time loadings, the page will show the Events of today and this is not via Ajax, it's just a ViewData["events"] sending information for the page. But, if I select a day, the page is updated via Ajax, but the tips don't work anymore!! They don't show anything... I hover the links and nothing happens...nothing nothing.

I think this was a cluetip problem, but for my surprise it wasn't...

Just for testing purposes, I created this in jQuery:

$(".myLink").click(function(){ alert($(this).attr("id")); }

When the page loads for the first time, this code works, but if I select another day and the page is updated, this jQuery code doesn't work anymore!! The click function doens't work at all!!

So, finishing this doubt... does anyone know what could be happening? Why my jQuery codes don't work in ASP.NET MVC updated page via Ajax??

Thanks all!!

Answer 1

It has to do with the path. When you reference your scripts, be sure to use <% Url.Content("~/path/to/script") %>

Answer 2

Improbable, but you could be wiping out the JS that is responsible for showing the cluetip when the MVC updates the container as a result of an AJAX call. That is, of course, if that JS is declared inline, inside the document.

Answer 3

Add your mouseover/click event handlers again on ajaxComplete. jQuery selectors don't always work on document elements that are added dynamically to the page, like those returned from an AJAX call.

This code re-binds your event right after content population:

$.get("/getMyContent/" + eventID, "{}", function(content) {
  $(".contentArea").html(content);
  $(".eventLink").click(function(){
    doMyPopupEtc();
  });
});

Answer 4

Use the live function when binding events-

$(".myLink").live("click", function(){
    alert($(this).attr("id"));
});

This will ensure all elements with .myLink will be effected by the event, even if they are dynamically loaded later.

This doesnt work for every event though, so check the doc: http://docs.jquery.com/Events/live

Answer 5

First I thought I had a similar problem. It turned out though that I was assigning the cluetip twice which stopped it from working.