JQuery 自动完成不会在模态窗口中触发答案

【问题标题】：JQuery Autocomplete does not fire in Modal WindowJQuery 自动完成不会在模态窗口中触发
【发布时间】：2021-05-23 16:43:06
【问题描述】：

我正在使用完美运行的 JQuery 自动完成功能。我有一个可以作为独立表单完美运行的表单（这意味着我可以通过 URL 访问它）但是当我将表单包含在 Bootstrap 模态框中时，JQuery 自动完成不会触发。

我正在渲染模态表单如下

 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);
                }
            });
        }

表单正确呈现，但没有触发任何 JQuery 代码。有哪些可能的原因会导致这种情况发生？我什至编写了一个更改事件。当表单直接从 URL 执行时，它会正确触发，但在通过 Modal 呈现时不会。

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

控制台中没有错误。我不知所措。有人可以指出我正确的方向以弄清楚发生了什么吗？

非常感谢。

--- 值

【问题讨论】：

您好，您的输入是动态生成的，因此您需要将其绑定到静态元素，即：$(document).on('change','input',function(){..//your code here })

标签： jquery asp.net-core bootstrap-modal asp.net-ajax

【解决方案1】：

我终于通过改变加载模式的方式解决了这个问题。我将代码更改为以下代码，现在 JQuery 可以正确触发。

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');
        }
    })
}

【讨论】：