Alpinejs x-on：单击不起作用，将其附加到父 div 项目

Question

单击此元素后我无法获取控制台日志。但是将 div 更改为按钮将获取结果。这是我的代码片段。

    <div class="navbar">
      <div x-on:click="console.log('clicked')" class="navitem msn">
        <div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
            />
          </svg>
          <div class="navtitle">Title1</div>
        </div>
      </div>
</div>

Answer 1

你有几个错误：

• 没有x-data指令。x-data任何 Alpine.js 组件上至少需要一个空的。
• SVG 代码中有一个随机的“在此处输入代码”字符串。
• 你有一个缺失的</div>元素。

更正后的例子：

<div x-data="" class="navbar">
  <div x-on:click="console.log('clicked')" class="navitem msn">
    <div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
      <div class="navtitle">Title1</div>
    </div>
  </div>
</div>