代码之家 › 专栏 › 技术社区 › guettli

htmx:子元素中更改事件的hx触发器

htmx html javascript

0

guettli · 技术社区 · 5 年前

我使用 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> 。

如何告诉htmx在 select 是否已更改?

背景:这是一个Relayrace,每条腿都是表格中的一行。

0 回复 | 直到 5 年前

1

guettli 5 年前

您需要使用 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>