I have used Jqgrid in my asp.net mvc project.I got error like "Uncaught TypeError: $(...).jqGrid is not a function"

I have  Mentioned my code below.plz help me .

Bundleconfig.cs

            bundles.Add(new  ScriptBundle("~/bundles/rolescripts").Include(

                "~/Scripts/jquery.jqGrid.js",

                  "~/Scripts/jqModal.js",

                  "~/Scripts/jqDnR.js",

                "~/Scripts/grid.locale-en.js"

                ));

 bundles.Add(new StyleBundle("~/Content/css").Include(

                                                           "~/Content/ui.jqgrid.css",

                                                           "~/Content/themes/base/jquery-ui.css"));

index.cshtml

<div>

    <table id="list">

    </table>

    <div id="pager">

    </div>

</div>

<script type="text/javascript"  src=" http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

    $('#list').jqGrid({

        caption: "RoleMaster",

        url: "/System/GetRoleRecords/",

        datatype: "json",

        contentType: "application/json; charset-utf-8",

        mtype: 'GET',

        colNames: ['RoleId', 'Rolename', 'RoleDescription'],

        colModel: [

                 { name: 'RoleId', index: 'RoleId', width: 50 },

                 { name: 'Rolename', index: 'Rolename', width: 150 },

                 { name: 'RoleDescription', index: 'RoleDescription', width: 250 },

           ],

        pager: jQuery('#pager'),

        sortname: "RoleId",

        sortorder: "ASC",

        rowNum: 10,

        loadonce: true,

        viewrecords: true

    });

    $("#list").navGrid("#pager", { edit: false, add: false, del: false, search: false, refresh: false });

</script>