htmx：hx-trigger 子元素中的更改事件

Question

我用的是htmx与 Django 表单库一起使用。

\n

这是我的模板：

\n

<table>\n <tr hx-post="{{ object.get_absolute_url }}" hx-swap="outerHTML" \n     hx-trigger="changed">\n  <th>{{ object.leg.start }}</th>\n  <th>--&gt;</th>\n  <th>{{ object.leg.end }}</th>\n  <th>{{ object.leg.distance }}m</th>\n  <th>{{ object.leg.difficulty_verbose }}</th>\n  <td>{{ form.runner }} {{ form.runner.errors }}</td></tr>\n</table>\n

\n

这是创建的 html：

\n

<table>\n <tr hx-post="/leg/155/Talfreunde/ %}" hx-swap="outerHTML" hx-trigger="changed">\n  <th>Sch\xc3\xb6neck</th>\n  <th>--&gt;</th>\n  <th>M\xc3\xbchlleithen</th>\n  <th>13400m</th>\n  <th>hard</th>\n  <td>\n    <select name="runner" required id="id_runner">\n     <option value="">---------</option>\n     ...\n    </select>\n  </td>\n </tr>\n</table>\n

\n

我希望它<tr>表现得像一个表格。

\n

我试图找到一种方法来告诉hx-trigger监听<select>.

\n

如何让htmx在更改后立即提交数据select？

\n

背景：这是一场接力赛，每条赛程将在桌子上占据一行。

\n

Answer 1

您需要使用该change事件。这个词changed确实有不同的含义。

<script src="https://unpkg.com/htmx.org@1.1.0"></script>

<table>
 <tr hx-post="//example.com" hx-trigger="change">
  <td>
    <select name="runner">
     <option value="a">a</option>
     <option value="b">b</option>
    </select>
  </td>
 </tr>
</table>