How to Include Jquery function in a partial view in a modal

Question

I have a jquery button click method which works fine in views other than modals.uploadbtn button click method doesn't work when partial view is loaded in the modals

<script src="~/lib/jquery/dist/jquery.min.js"></script>

    <div class="form-group">
        <div class="col-md-10">
            <p>Upload one or more files using this form:</p>
            <input type="file" id="files" name="files" multiple />
            <input id="documentType" name="entity" value=@ViewData["entity"] hidden>
            <input id="id" name="id" value=@Model hidden>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <input type="submit" id="upload" value="Upload" />
            <button type="button" id="uploadbtn">Upload</button>
            
        </div>
    </div>


<script>
    $(document).ready(function () {
        $("#uploadbtn").click(function () {
            console.log("came");
            var documentType = $('#documentType').val();
            var fileUpload = $("#files").get(0);
            var files = fileUpload.files;
            console.log(files);


          

        });
    });

    </script>

Can someone tell me what I should do in order to get this working in the modals? I am working in a .net core project

Answer 1

Update Demo as below:

Controller.cs: I create an action BBB to return _FilePartialView.

public class HomeController : Controller
   {
        public IActionResult Privacy()
        {
            return View();
        }
        public IActionResult BBB()
        {
            return PartialView("_FilePartialView");
        }
    }

In privacy view, I add a modal to upload file.

<button id="btnShowModal" type="button" > Upload </button>
<div class="modal fade" id="Modal">                                            
<div class="modal-dialog modal-lg">
 <div class="modal-content">
     <div class="modal-header">
        <button  id="btnHideModal" type="button" class="btn btn-secondary" data-dismiss="modal">  ×</button>
      </div>                                                             
    <div class="modal-body" >
</div>
    </div>
 </div>
</div>
script src="~/lib/jquery/dist/jquery.min.js"></script>
   

 <script type="text/javascript">
        $(document).ready(function () {
            $("#btnShowModal").click(function () {
                $.get("@Url.Action("BBB","Home")",
                function(data){$('.modal-body').html(data);})
                $("#Modal").modal('show'); 
            });
        $("#btnHideModal").click(function () {
                $("#Modal").modal('hide');
            });
        });       
    </script>  

_FilePartialView.cshtml:

[Note]I remove <script src="~/lib/jquery/dist/jquery.min.js"></script>