Htmx preload扩展失效：鼠标悬停未触发网络请求（Django环境）

• 确认Preload扩展已正确引入：
  仅引入Htmx主库不够，必须单独加载Preload扩展脚本，确保页面中包含：

  <script src="https://unpkg.com/htmx.org/dist/ext/preload.js"></script>
  

  可在浏览器控制台输入htmx.extensions.preload，返回true即表示扩展加载正常。

• 修正Django URL模板标签的空格问题：
  你的代码里{% url 'mock_tests: get_question_from_id'%}的命名空间与视图名之间存在空格，会导致生成无效URL，即使Preload触发请求也会失败，修改为：

  {% url 'mock_tests:get_question_from_id' %}?qid={{question.id}}&tid={{test.id}}
  

• 检查扩展作用范围：
  虽然父元素已添加hx-ext="preload"，可尝试在按钮上直接添加该属性，确保扩展在当前元素生效：

  <button id="question-{{forloop.counter}}" data-question-id="{{question.id}}"
      hx-get="{% url 'mock_tests:get_question_from_id' %}?qid={{question.id}}&tid={{test.id}}" 
      preload="mouseover" hx-ext="preload" hx-target="#question-container" hx-swap="outerHTML"
      class="{% if forloop.counter == 1 %}not-answered {% else %}bg-white{% endif %} w-10 h-10">
      {{forloop.counter}}
  </button>
  

• 验证Htmx版本兼容性：
  Preload扩展仅在Htmx 1.7.0及以上版本支持，可通过控制台输入htmx.version查看当前版本是否达标。

• 查看浏览器控制台报错：
  打开开发者工具的Console面板，排查是否存在Htmx加载错误、属性解析错误等信息，快速定位问题根源。

内容的提问来源于stack exchange，提问作者abhi