0

我的页面中有一个类似结构的表，每一行都有 data-hx-get 属性指向 django 返回该行详细信息的 url。但也在同一行中，我有一个编辑按钮，django 在其中返回该项目的编辑表单。我希望整行都是可点击的，当点击显示时，它会用详细信息替换自身，还有用表单替换行的编辑按钮。它适用于用户，但是当单击行内的编辑按钮时，在控制台中我得到htmx:swapError因为该行还接收点击事件并执行它应该做的事情。按钮上的事件优先，在行之前它会更改行的内容，当行得到响应时，页面中不再有相应的 data-hx-target。所以，我的问题是，有没有办法告诉 htmx，当嵌套元素有 data-hx-get 时，忽略父级的 hx 指令。

<div 
    class="row item-row" 
    id="item-row-{{item.pk|unlocalize}}"
    data-hx-get="{% url 'some url' item.pk %}
    data-hx-swap="outerHTML"
    data-hx-trigger="click"
    data-hx-target="this">
            ...
         <button
            data-hx-get="{% url 'editurl' item.pk %}"
            data-hx-swap="outerHTML"
            data-hx-trigger="click"></button>
</div>
4

1 回答 1

1

您可以使用consume修饰符hx-trigger https://htmx.org/attributes/hx-trigger/。这将防止点击事件冒泡到父行。

<div 
    class="row item-row" 
    id="item-row-{{item.pk|unlocalize}}"
    data-hx-get="{% url 'some url' item.pk %}
    data-hx-swap="outerHTML"
    data-hx-trigger="click"
    data-hx-target="this">
            ...
         <button
            data-hx-get="{% url 'editurl' item.pk %}"
            data-hx-swap="outerHTML"
            data-hx-trigger="click consume"></button>
</div>
于 2022-01-07T13:18:35.843 回答