基于HTMX与Flask的表单仅能提交一次问题排查

我正在使用HTMX和Flask开发一个简单Web应用，以下是代码：

app.py #

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    print('submit clicked')
    input_text = request.form.get('inputText')
    return f'<p>You entered: {input_text}</p>'

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTMX Demo</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
  </head>
  <body>
    <form hx-post="/submit" hx-target="#output" hx-swap="outerHTML">
      <div>
        <label for="inputText">Enter Text:</label>
        <input
          type="text"
          id="inputText"
          name="inputText"
          placeholder="Type something..."
        />
      </div>
      <button class="btn btn-default">Submit</button>
    </form>
    <div id="output">
      <!-- The result will be displayed here -->
    </div>
  </body>
</html>

功能需求是：输入内容点击提交后，将内容渲染到output div中，但该功能仅能生效一次——第一次提交能显示内容，修改文本再次提交无反应，甚至无法触发后台的print('submit clicked')语句。

问题出在hx-swap="outerHTML"这个配置上：

• 第一次提交后，HTMX会用返回的<p>You entered: xxx</p>完全替换掉原来的<div id="output">元素
• 替换完成后，页面上不再存在id="output"的元素
• 再次提交时，HTMX找不到hx-target="#output"指定的目标元素，因此不会发送请求

有两种可行的修复方案：

方案1：修改hx-swap为innerHTML #

只替换#output元素内部的内容，保留#output本身：
修改index.html中的form标签：

<form hx-post="/submit" hx-target="#output" hx-swap="innerHTML">

这样每次提交后，只是把返回的内容插入到#output内部，元素本身不会被删除，后续提交依然能找到目标。

方案2：返回包含#output的HTML结构 #

修改Flask的submit函数，让返回的内容包含id="output"的div：

@app.route('/submit', methods=['POST'])
def submit():
    print('submit clicked')
    input_text = request.form.get('inputText')
    return f'<div id="output"><p>You entered: {input_text}</p></div>'

这样即使使用outerHTML替换，页面上依然会存在#output元素，后续提交可以正常找到目标。

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