JQuery Autocomplete does not fire in Modal Window

Question

I'm using JQuery Autocomplete which works perfectly. I have a form that works perfectly as a stand-alone form (meaning I get to it via the URL) however when I include the form within a Bootstrap Modal Box, the JQuery Autocomplete does not fire.

I'm rendering the modal form as follows

 function cloneProposal(id) {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("Clone", "Proposal")',
                data:
                {
                    id: id
                },
                cache: false,
                success: function (result) {
                    document.getElementById("modalbody").innerHTML = result;
                    var modalBox = $('#myModal');
                    modalBox.attr("proposalnumber", id);
                    $("#modalTitle").html('Clone Proposal');
                    modalBox.modal('show');
                },
                error: function (response) {
                    alert('Bad Request ' + response.responseText);
                }
            });
        }

The form renders correctly, but none of the JQuery code fires. What are some possible causes that would cause this to happen? I even coded a change event. It fires correctly when the form is executed directly from the URL however it does not when rendered via the Modal.

$("input").change(function(){
  alert("The text has been changed.");
});

There are no errors in the Console. I'm at a loss. Can someone point me in the right direction to figure out what's happening?

Thanks a bunch.

--- Val

Hi, your inputs are dynamically generated so you need to bind it to static elements i.e : `$(document).on('change','input',function(){..//your code here })` — Swati, Feb 21 '21 at 07:05

score 0 · Answer 1 · answered Feb 21 '21 at 17:07

I finally got this resolved by changing the way I'm loading the modal. I changed my code to the following and now JQuery is firing correctly.

showInPopup = (url, title) => {
    $.ajax({
        type: "GET",
        url: url,
        success: function (res) {
            $('#form-modal').modal('handleUpdate')
            $('#form-modal .modal-body').html(res);
            $('#form-modal .modal-title').html(title);
            $('#form-modal').modal('show');
        }
    })
}

JQuery Autocomplete does not fire in Modal Window

1 Answers1