Javascript callback not firing when AJAX operation complete

Given the following code on an ASP.NET MVC View:

<% using (Ajax.BeginForm("AddCommunity", 
    new AjaxOptions { UpdateTargetId = "community-list", 
    OnSuccess = "BindCommunityHover" }))
   { %>
    Add Community: <input type="text" id="communityName" name="communityName" /> 
    <input type="submit" value="Add" />
<% } %>

And the following JavaScript method in the file:

function BindCommunityHover() {
    $(".community-item-li").hover(
            function () { $(this).addClass("communityHover"); },
            function () { $(this).removeClass("communityHover"); }
        );
};

Is there any reason why BindCommunityHover is not being called when the AJAX result comes back?

The community-list div is properly updated (the action returns a partial view). I have also tried setting OnComplete (instead of OnSuccess) to no avail.

The BindCommunityHover method is called in a $(function(){...}); block when the page first loads, and for all existing .community-item-li elements, it works.

The partial result from my controller replaces all items in that div with more of the same class. The OnSuccess method is supposed to fire after the document i开发者_如何学Cs updated.

Update: k...this gets weird. I added the following to the BindCommunityHover method:

alert($(".community-item-li").size());

I'm getting 240 in the alert when the page loads and when the callback fires. So, the callback IS firing, jQuery is matching the elements but not applying the styles...

That's because your function is basically saying add a hover event for all of these items as they exist at the point in time when the function is called.

If you then add new elements they aren't automatically bound. There is a new feature in JQuery called Live Events. I've not dug into them but I think they might help here. Otherwise as you add new elements be sure to bind the hover functions.

Okay, there were two parts to this solution.

First culprit was some nasty caching thing that I can't figure out in Cassini/IE. I tried rebooting, stopping Cassini, restarting VS2010...nothing worked.

The code still won't work on IE on my account on this computer. The deployed-to-IIS version works on all browsers. It also works in IE if I change the filename. Something is borked there, though. If I run the project with Cassini/IE, then open FireFox and go to the site, it works.I tried to repro the error to file a bug, but I can't get it to go. I digress. To get around this I changed the name of the .js file and moved the reference to a different spot in the master page.

The other thing was that I did have to use OnSuccess. I switched to using OnComplete when I was trying to figure out what was wrong. After I figured out the file/browser/server problem, I realized that OnComplete (per the docs) fires before the document is updated; the elements were being updated but then thrown away.

The OnSuccess/OnComplete might help sort something out for someone, not sure about the file/browser/server issue...that might be environmental.