form.submit();在 DOM 中“刷新”表单后不起作用。控制台提示：表单提交已取消，因为表单未连接
Posted
技术标签:
【中文标题】form.submit();在 DOM 中“刷新”表单后不起作用。控制台提示：表单提交已取消，因为表单未连接【英文标题】：form.submit(); not working after form is 'refreshed' in DOM. Console says: Form submission canceled because the form is not connected 【发布时间】：2021-06-16 16:26:00 【问题描述】：我有几个订单行，每个订单行都包含一个表单。在订单行中，用户可以更改该订单行中产品的数量或更改某些属性。每次发生这种情况时，该订单行中的表单都会使用更新的信息进行刷新（在每个操作上，数据都通过 Ajax 发送到 php 脚本，该脚本返回表单的新数据并替换旧数据）。
问题是在任何操作之后，表单将不再提交，仅在页面加载时不执行任何操作（因此不会更改数量、更改属性等）。
我的 1 个订单行的 html 示例：
<div class="productblock">
<span class="refreshform" id="60534e379eb4d">
<form class="editorform" action="https://pancake.a2test.com/print" method="post">
<input
type="hidden"
name="json"
value='"customer_id":"33","order_id":"123","quantity":"5","rulers":null,"canvas_size":"600x1000","bleed":null,"safety_margin":null,"dpi":null,"multiple_layouts":null,"procheck":"y","multiple_pages":"1","product_name":"Textielframe","thumbnail":"https:\/\/website.nl\/new\/cms\/images\/producten\/textiel_producten\/textielwand\/1288_9936468fbe050be8_1.jpg","orderline":"60534e379eb4d"'
/>
</form>
</span>
<div class="productblockbottom">
<span>
<b>Hoe lever je jouw ontwerp aan?</b> <span class="tooltippy_nostyle" aria-expanded="false"><img class="infosvg" src="assets/images/custom/icon_info.svg" /></span>
</span>
<div class="productblockbtns">
<a href="javascript:void(0);">
<button class="btnstyle uploadbtn" type="button" name="button">Lever je bestanden aan <i class="icon-upload"></i></button>
</a>
<span>of</span>
<a href="javascript:void(0);">
<button class="btnstyle" type="button" name="button">Maak een ontwerp <i class="icon-design"></i></button>
</a>
</div>
</div>
</div>
然后是我的 jQuery：
$( ".uploadbtn" ).each(function()
var form = $(this).closest('.productblock').find('.editorform');
$(this).click(function()
form.submit();
);
);
我知道当任何新的东西被添加到 DOM 时，jQuery 只能找到它，如果你找到一个不是新的更高的参考点，并从那里找到新添加的 DOM 元素，所以这就是我尝试的：
var form = $(this).closest('.productblock').find('.editorform');
productblock 不会刷新。那么为什么我不能提交表单呢？
在我的控制台中，我收到此错误：Form submission canceled because the form is not connected。
我尝试使用 javascript 将表单附加到我的正文中，但我一直收到相同的消息。
【问题讨论】：
【参考方案1】：您的 JQuery 代码不会在 Newly 元素上触发事件。试试直播活动代码：
$(document).on('click', '.uploadbtn', function()
var form = $(this).closest('.productblock').find('.editorform');
form.submit();
);
请记住在提交之前将您的新产品附加到正文：
var newBlock = ...;
document.body.appendChild(newBlock);
试试下面的代码：
var blockCount = 1;
function addBlock()
blockCount++;
var block = document.querySelector(".productblock");
var newBlock = block.cloneNode(true);
newBlock.querySelector('.blockHeader').innerHTML = 'Block '+ blockCount;
document.body.appendChild(newBlock);
$(document).on('click', '.uploadbtn', function()
var form = $(this).closest('.productblock').find('.editorform');
//form.submit();
console.log('submit');
);.productblock
border: 1px solid red;
border-radius: 10px;
backgrond-color: lightgray;
margin: 10px;
padding: 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button onclick='addBlock()'>Click to add new block</button>
<hr/>
<div class="productblock">
<span class='blockHeader'>Block 1</span>
<hr/>
<span class="refreshform" id="1">
<form class="editorform" action="https://pancake.a2test.com/print" method="post">
<input
type="hidden"
name="json"
value='"customer_id":"33","order_id":"123","quantity":"5","rulers":null,"canvas_size":"600x1000","bleed":null,"safety_margin":null,"dpi":null,"multiple_layouts":null,"procheck":"y","multiple_pages":"1","product_name":"Textielframe","thumbnail":"https:\/\/website.nl\/new\/cms\/images\/producten\/textiel_producten\/textielwand\/1288_9936468fbe050be8_1.jpg","orderline":"60534e379eb4d"'
/>
</form>
</span>
<div class="productblockbottom">
<span>
<b>Hoe lever je jouw ontwerp aan?</b> <span class="tooltippy_nostyle" aria-expanded="false"><img class="infosvg" src="assets/images/custom/icon_info.svg" /></span>
</span>
<div class="productblockbtns">
<a href="javascript:void(0);">
<button class="btnstyle uploadbtn" type="button" name="button">Upload<i class="icon-upload"></i></button>
</a>
<span>of</span>
<a href="javascript:void(0);">
<button class="btnstyle" type="button" name="button">Blah Blah</button>
</a>
</div>
</div>
</div>
</body>【讨论】：
以上是关于form.submit();在 DOM 中“刷新”表单后不起作用。控制台提示：表单提交已取消，因为表单未连接的主要内容，如果未能解决你的问题，请参考以下文章
Form submission canceled because the form is not connected