Uncaught TypeError: undefined is not a function jquery.unobtrusive-ajax.js

Question

In my mvc 4 web application I'm getting the following error "Uncaught TypeError: undefined is not a function jquery.unobtrusive-ajax.js:115"

on this line we have

$("a[data-ajax=true]").live("click", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

I have found many people getting the same error and read posts. Almost all of them recommend reordering the jquery and others scripts , which I have been trying for long time now but nothing seems to remove this error.

Currently I have the css and the scripts in the following order in the head section. Could any one kindly find any issues? thanks

<link href="/Content/main/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/UiDatePicker.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Content/main/js/General.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>

Answer 1

.live() was deprecated in jQuery 1.7 and was removed in jQuery 1.9. You can use .on() instead:

$("a[data-ajax=true]").on("click", function (evt) {

Or, if elements are added dynamically:

$(document).on('click', "a[data-ajax=true]", function (evt) {

Note: even though it is possible to fix all these problems in unobtrusive-ajax.js, it will be better to download newer version with all these problems been fixed (if this version exists at all, of course).