jQuery调用form.submit()未发送POST请求是什么原因？

我已找到问题根源：这是我在旧代码基础上新增内容时的疏漏，我一开始未注意到页面已存在一个表单，错误地在其内部嵌套了另一个表单。以下为问题原始内容：

我的HTML与脚本代码如下，项目基于Django框架开发，对应代码为Django模板，但我判断该问题与Django无关。页面通过ul、li元素排列展示目录及文件列表（存在对应条目时渲染展示）。我的预期交互逻辑为：点击任意列表项（li元素）时触发表单提交。目前我可以正常看到alert()弹窗弹出，但服务端始终未收到POST请求。我在项目其他位置编写过功能类似的代码可正常运行，唯独这段代码失效，我无法定位遗漏了什么配置。

复现代码 #

<form id="id_f_sel" action="{% url 'integratedTest:addCase' %}" method="post">
        {% csrf_token %}
        <input type="hidden" id="id_f_clked" name="f_clked" value="">
            <ul id="id_dirlist">
                {%for item in dirs %}
                    <li><img src="{% static 'image/folder.png' %}" alt="unclicked folder image">
                    <span class="caret">{{item}}</span></li>
                {%endfor%}
            </ul>
        
            <ul id="id_flist">
                {%for item in files %}
                    <li><img src="{% static 'image/file.png' %}" alt="file image">
                    <span class="caret">{{item}}</span></li>
                {%endfor%}
            </ul>            
        </form>

<script>  
    $(document).ready(function() {    
        $('li').on('click', function() { 
          clk_val = $(this).text()  
          alert(clk_val)
          $('#id_f_clked').val(clk_val)  
          $('#id_f_sel').submit()          
        });
    });
</script>

异常现象 #

• 浏览器开发者工具的Network（网络）面板无任何请求记录，请求完全没有发出。
• 控制台输出[Violation] 'click' handler took 1272ms提示，无法理解该提示含义。
• 浏览器网络面板截图：
  

HTML规范明确禁止表单嵌套，浏览器解析DOM时碰到嵌套表单会自动修正结构：要么提前闭合外层表单，要么把内层表单直接移出父表单节点。这种情况下你调用$('#id_f_sel').submit()触发提交时，目标表单已经丢失了原本配置的提交地址、请求方法甚至内部的表单项，自然发不出POST请求。

控制台输出的[Violation] 'click' handler took 1272ms只是性能警告，意思是本次点击事件的处理逻辑执行耗时超过1秒，基本是alert()弹窗阻塞主线程导致的，和表单提交失败没有直接关联。

修复方式非常简单：删掉多余的嵌套表单，保证页面所有表单都是互不嵌套的平级结构即可。如果同一块区域确实需要放置多个表单，把每个表单的标签移到对应内容块的最外层，不要出现<form>标签嵌套的写法。

内容的提问来源于stack exchange，提问作者Wason