htmx：子元素中更改事件的 hx 触发器答案

【问题标题】：htmx: hx-trigger for a change event in a child elementhtmx：子元素中更改事件的 hx 触发器
【发布时间】：2021-01-10 16:18:29
【问题描述】：

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

这是我的模板：

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

这是创建的html：

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

我希望<tr> 像表单一样工作。

我试图找到一种方法让hx-trigger 监听<select> 的更改事件。

select 更改后如何告诉 htmx 提交数据？

背景：这是一场接力赛，每条腿都是桌子上的一行。

【问题讨论】：

标签： javascript html htmx

【解决方案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>

【讨论】：