Error: $ is not a function in ASP.Net MVC

_PartialComplete.cshtml

@model MVCGpsTracking.Models.CompleteDuty



@section scripts
{

    <script src="@Url.Content("~/Content/ramki/")js/vendor/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">

        jquery('#comp_duty').click(function () {

            debugger;
            var bookingid = jquery('#b_id').val();
            var distance = jquery('#dis').val();
            var fare = jquery('#far').val();
            var tripminutes = jquery('#t_min').val();
            //alert(distance);

            Url.Action("CompleteTrip", "NewBooking", new { bookid: bookingid, distance: distance, fare: fare, tripminutes: tripminutes });
        });
    </script>


}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>CompleteDuty</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.bookingid, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.bookingid, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", id="b_id" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.distance, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.distance, new { htmlAttributes = new { @class = "form-control", id ="dis" } })
                @Html.ValidationMessageFor(model => model.distance, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fare, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fare, new { htmlAttributes = new { @class = "form-control", id="far" } })
                @Html.ValidationMessageFor(model => model.fare, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.tripminutes, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.tripminutes, new { htmlAttributes = new { @class = "form-control", id = "t_min" } })
                @Html.ValidationMessageFor(model => model.tripminutes, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.lat, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.lat, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.lat, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.lng, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.lng, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.lng, "", new { @class = "text-danger" })
            </div>
        </div>*@
       
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" name="btn_complete" value="Complete Duty" id="comp_duty"/> 
              
            </div>
        </div>
    </div>
}

It's shows an error: $ is not a function

Can anybody help me out of this?