动态注入到HTML表单的输入字段无法被表单提交识别的问题求助

各位大佬好，我最近在做一个表单功能，需求是用户填完一个输入框后，自动添加新的输入项。我写了个事件监听器，通过AJAX请求后端接口，成功的话就把返回的输入元素注入到表单里，AJAX代码如下：

$.ajax({
    type: "GET",
    url: "{% url 'cart:get-delivery' %}",
    data :{
        city : id
    },
    success: function(res) {
        $("#delivery").replaceWith(res.component)
        $('.spinner-overlay').remove();
    },
    error: function(e) {
        console.log("Failed")
        $('.spinner-overlay').remove();
    }
})

表面上看表单运行得挺正常的，新输入框也能正常显示，但提交表单的时候就出问题了——后端用request.POST.get('example')根本拿不到新注入字段的值，仿佛这些字段不存在一样。

我自己排查了半天没找到原因，想请教下大家可能哪里出问题了？以下是我想到的几个可能方向，也麻烦帮忙看看：

• 是不是新注入的输入框没在<form>标签范围内？我是用$("#delivery").replaceWith()替换元素的，这个#delivery本身是在表单里的，但会不会替换后新元素跑出去了？
• 新输入框的name属性是不是没设置对？毕竟后端是靠name来获取表单值的，要是这个属性写错或者漏写了肯定拿不到。
• 有没有可能是AJAX返回的HTML里，输入框被意外设置了disabled属性？我记得disabled的表单元素是不会被提交的。

另外也想问问大家有没有什么靠谱的排查方法？比如怎么确认新字段到底有没有被表单提交带上？

备注：内容来源于stack exchange，提问作者excound