ASP.NET MVC4 Ajax.ActionLink replaces entire page

Question

In my view I have:

 @section Header {
     @Scripts.Render("~/bundles/jqueryval")
 }

<div>
    <div>@Ajax.ActionLink("Test", "CurrentTime", new AjaxOptions { UpdateTargetId = "some_div", InsertionMode = InsertionMode.InsertAfter })</div>
</div>

<div id="some_div">

</div>

In header of the result page I see these scripts are referenced:

<script src="/Scripts/jquery-1.6.4.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

The link looks there like this:

<div><a data-ajax="true" data-ajax-mode="after" data-ajax-update="#some_div" href="/Tournament/CurrentTime">Test</a></div>

In the controller:

public string CurrentTime()
{
    return DateTime.Now.ToLongTimeString();
}

In my web.config (in the root of the application):

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

My problem is: whenever I click the link, the result (current time) always replaces entire page - it is not inserted in / after / before some_div. Thanks

Answer 1

Base on your comment the answer is easy you have to upgrade your jQuery. The on method is working from jquery 1.7. I suggest to use jquery 1.7.2 because mvc scripts have sometimes problems with higher versions