hx-include

hx-include 屬性允許你在 AJAX 請求中包含額外的元素值。此屬性的值可以是：

• 要包含的元素的 CSS 查詢選擇器。
• this，它將包含該元素的後代元素。
• closest <CSS selector>，它將找到符合給定 CSS 選擇器的最近的祖先元素或元素本身（例如，closest tr 將目標設為該元素最近的表格列）。
• find <CSS selector>，它將找到符合給定 CSS 選擇器的第一個子後代元素。
• next <CSS selector>，它將在 DOM 中向前掃描，尋找符合給定 CSS 選擇器的第一個元素。（例如，next .error 將目標設為具有 error 類別的最近的後續兄弟元素）
• previous <CSS selector>，它將在 DOM 中向後掃描，尋找符合給定 CSS 選擇器的第一個元素。（例如，previous .error 將目標設為具有 error 類別的最近的前一個兄弟元素）

這是一個包含單獨輸入值的範例：

<div>
    <button hx-post="/register" hx-include="[name='email']">
        Register!
    </button>
    Enter email: <input name="email" type="email"/>
</div>

這個例子有點牽強，因為通常你會將這兩個元素都包含在 form 中，然後自動提交該值，但這可以展示這個概念。

請注意，如果你包含一個非輸入元素，則將包含該元素中包含的所有輸入元素。

注意事項

• hx-include 是繼承的，可以放置在父元素上。
• 雖然 hx-include 是繼承的，但它是從觸發請求的元素開始評估的。當使用擴展選擇器（例如 find 和 closest）時，很容易感到困惑。

  <div hx-include="find input">
      <button hx-post="/register">
          Register!
      </button>
      Enter email: <input name="email" type="email"/>
  </div>
  

  在上面的例子中，當點擊按鈕時，find input 選擇器是從按鈕本身解析的，由於按鈕沒有任何 input 子元素，因此這裡不會返回任何元素，進而引發錯誤。
• 標準的 CSS 選擇器會解析為 document.querySelectorAll，並且會包含多個元素，而擴展選擇器（例如 find 或 next）最多只會返回一個要包含的元素。