javascript - uikit 3 捕获事件

Question

我使用 uikit v3，并尝试在 uikit 灯箱/幻灯片中记录点击次数。在事件“itemshow”之后，我想向 piwik 发送日志请求。 piwik 请求不是问题，但我无法捕获事件“itemshow”。 https://getuikit.com/docs/lightbox#javascript

$(function () {
        $("div.uk-lightbox").on('itemshow', function() {
            alert("it works"); // it does not...
        });
    });

https://jsfiddle.net/nypd6L2u/1/

Answer 1

事件的问题是，它实际上不是在元素本身上触发的(正如文档所说)，而是在文档上触发的，并且目标是由 UIKit 创建的元素，并且在JS 的负载(这就是我们在这里使用委托(delegate)选择器的原因)

我将你的 fiddle 复制到代码片段中:

$(function () {
    $(document).on('itemshow', 'div.uk-lightbox', function() {
        alert("it works"); // thanks to ^ this it works
    });
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>

<h2>
  Lightbox Events
</h2>
<div class="uk-child-width-1-3" uk-grid uk-lightbox="animation: slide">
  <div>
    <a class="uk-inline" href="https://getuikit.com/docs/images/photo.jpg">
      <img src="https://getuikit.com/docs/images/photo.jpg" alt="">
    </a>
  </div>
  <div>
    <a class="uk-inline" href="https://getuikit.com/docs/images/dark.jpg" caption="Caption 2">
      <img src="https://getuikit.com/docs/images/dark.jpg" alt="">
    </a>
  </div>
  <div>
    <a class="uk-inline" href="https://getuikit.com/docs/images/light.jpg" caption="Caption 3">
      <img src="https://getuikit.com/docs/images/light.jpg" alt="">
    </a>
  </div>
</div>