HTMX：从 JavaScript 函数动态添加 hx 属性时，请求不会触发

Question

我有一个包含多个select元素的表单，其中某些元素的可用选择取决于其他元素的所选值。我正在使用 HTMX 来实现这一点。对于一个元素，我还想根据前一个元素中选择的值动态设置hx-post和属性。hx-target

我可以使用 JavaScript 成功设置属性，但是当元素更改时，请求实际上不会触发。

超文本标记语言

<form>
    <select id="dropdown_A" onchange="dropdownAChanged(this.value);" hx-post="/choices/dropdown_B/" hx-target="#dropdown_B" required>
        <option value="">--</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <select id="dropdown_B" required>
        <option value="">--</option>
    </select>

    <select id="dropdown_C" class="inactive">
        <option value="">--</option>
    </select>

    <select id="dropdown_D" class="inactive">
        <option value="">--</option>
    </select>
</form>

JavaScript

function dropdownAChanged(value) {
    const b = document.querySelector('#dropdown_B');
    const c = document.querySelector('#dropdown_C');
    const d = document.querySelector('#dropdown_D');

    switch (value) {
        case '1':
            makeInactive([c, d]);
            break;

        case '2':
            makeActive(c);
            makeInactive(d);
            b.setAttribute('hx-post', '/choices/dropdown_C/');
            b.setAttribute('hx-target', '#dropdown_C');
            break;

        case '3':
            makeActive(d);
            makeInactive(c);
            b.setAttribute('hx-post', '/choices/dropdown_D/');
            b.setAttribute('hx-target', '#dropdown_D');
    }
}

基本上有四个下拉菜单（A、B、C 和 D）。默认情况下，显示 A（包含选项 1、2 和 3）和 B（空），隐藏 C 和 D。如果在 A 中选择值 1，则 B 会填充选项，而 C 和 D 保持隐藏状态。但是，如果在 A 中选择 2 或 3，则 C 或 D 将变得可见，并且一旦在 B 中做出选择，就需要能够填充自己的选择。因此，B 可能需要hx更新 C 或 D 的属性，或两者都不是，全部取决于 A 的值。

由于当 A 更改以处理激活/停用 C 和 D 时我已经在使用 JavaScript 函数，因此我想我也可以在那里设置hx-post和hx-target属性。它的工作原理是，当 A 发生更改时，B 上的属性确实会成功更新，但当在 B 中进行选择时，预期的请求永远不会真正触发。

我猜这是因为 HTMX 在加载时添加了必要的 EventListeners，然后即使hx在事后添加了属性，必要的 EventListeners 也永远不会被创建/更新。但我不完全确定情况是否如此，或者可以采取什么措施（如果有的话）。

Answer 1

是的，HTMX 在页面加载时和交换事件之后创建事件侦听器。如果您使用第 3 方 JS 操作 DOM，则需要触发 HTMX 重新处理相应部分，以查找新的/更新的 HTMX 特定属性。为此，它提供了htmx.process(element)JS API，您需要将修改后的元素作为参数传递。因此，在您的情况htmx.process(b)下，将switch块放在函数中dropdownAChanged足以解决问题。或者您可以将 ID 赋予表单并放在htmx.process(htmx.find('#myform'))函数末尾，以使 HTMX 重新处理整个表单。