JQuery Scripts are not working on asp.net mvc partial views

I am facing problems inside my asp.net mvc web application's partial views. as jQuery scripts will not work on partial views,, while they work on regular views. For example i have the following script, while will show the returned partial views inside modal popups:-

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {

            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
            });
            return false;
        });


    });

and i added links such as , for the above script to work on , inside my Razor views:-

 <a data-modal='' href="@Url.Action("Delete","SecurityRole",new{id = item.SecurityRoleID })"   id="@item.SecurityRoleID" title="Delete"> 

and the action method is :-

 public async Task<ActionResult> Delete(int? id)
        {

SecurityRole securityrole = await uniteofwork.SecurityRoleRepository.FindSecurityRole(id.Value);

            if (Request.IsAjaxRequest()) {

                return PartialView(securityrole);
            }
            return View(securityrole);
        }

now let say i have the <a data-modal=''link inside a WebGrid, then when i click on the link when the WebGrid first load, the script will cause the partial view to display inside a model popup, without any problems. but if i do some ajax-based paging or sorting inside the WebGrid, and i click on the <a data-modal='' link ,, then the script will not fire and the <a data-modal='' link will be sending normal http request to the action method, and accordingly a normal view will be returned. so can anyone adivce how to force the above jQuery to understand partial views that are rendered after the jQueryscrip load?

Problem #2 I am working on an asp.net mvc 5.2.2 web application. and i wrote the following Script which show a partial view inside a model popup, and also apply an auto complete:-

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        //$("a[data-modal]").on("click", function (e) {
            $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
                $("input[data-autocomplete-source]").each(function () {
                    var target = $(this);
                    target.autocomplete({
                        source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000



                    });

                });
            });
            return false;
        });


    });
    $(function () {

        //$("a[data-modal]").on("click", function (e) {
        $(document).on('click', 'button[data-dismiss]', function (e) {
            location.reload();
        });


    });
    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", "disabled");
            $('#progress').show();
            if ($(this).valid()) {

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                       if (result.ISsuccess) {
                            $('#myModal').modal('hide');
                            $('#progress').hide();
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            location.reload();
                            //  alert('www');
                        } else {

                            $('#progress').hide();
                            $('#myModalContent').html(result);
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            bindForm();
                        }
                    }
                });
            }
            else {
                $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                $('#progress').hide();
                return false;
            }

            return false;
        });
    }
});

the field that will apply autocomplete looks as follow:-

<h3 style="color:#f99406" >Assign Customers To Skill</h3>

     @using (Html.BeginForm("AssignSingleCustomerToSkill", "Skill"))
{
     @Html.AntiForgeryToken()
     @Html.ValidationSummary(true)
<div class="form-horizontal">
<div class="form-group"> 
    @Html.Hidden("ID")
<label class = "control-label col-md-2" >Customer Name</label>
<div class="col-md-10 ">
***<input  name="term" type="text" data-val="true" data-val-required= "Please enter a value." class="form-control" data-autocomplete-source= "@Url.Action("AutoComplete", "Customer")"  />*** 
<span class="field-validation-valid" data-valmsg-for="term" data-valmsg-replace="true"></span></div>
</div>              


      <div class="form-group">
            <div class="col-md-offset-0 col-md-10">

<input class="btn btn-primary" type="submit" value="Assign Single Customer" /> </div></div>

</div>

    }

now when i render the partial view inside a model popup , and i start typing inside the autocomplete field, the autocomplete action method will be called, and using the F12 developer tool i can see that the response will be received, But the problemis that no items will be displayed inside the auto complete field.

while if i render the view a regular view (not as partial view), i will not face ant problem.

here is the css i am referencing inside the layout view:-

 bundles.Add(new StyleBundle("~/Content/cssTemplate").Include(
  "~/css/bootstrap-cerulean.min.css" ,
"~/css/charisma-app.css",
"~/bower_components/fullcalendar/dist/fullcalendar.css",
"~/bower_components/fullcalendar/dist/fullcalendar.print.css",
"~/bower_components/chosen/chosen.min.css",
"~/bower_components/colorbox/example3/colorbox.css",
"~/bower_components/responsive-tables/responsive-tables.css",
"~/bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css",
"~/css/jquery.noty.css",
"~/css/noty_theme_default.css",
"~/css/elfinder.min.css",
"~/css/elfinder.theme.css",
"~/css/jquery.iphone.toggle.css",
"~/css/uploadify.css",
"~/css/animate.min.css",
           "~/Content/themes/base/core.css",            
              "~/Content/themes/base/autocomplete.css",            
              "~/Content/themes/base/theme.css"   ,
              "~/Content/site.css"
                ));

can anyone adivce on this please?

Thanks