uikit 3 捕捉事件答案

【问题标题】：uikit 3 catch eventsuikit 3 捕捉事件
【发布时间】：2017-11-28 22:11:14
【问题描述】：

我使用 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/

【问题讨论】：

标签： javascript jquery getuikit

【解决方案1】：

事件的问题在于，它实际上并没有在元素本身上触发（如文档所述），而是在文档上触发并针对一个元素，该元素由 UIKit 创建，在加载你的 JS（这就是我们在这里使用委托选择器的原因）

我把你的小提琴复制到 SO 代码 sn-p 中：

$(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>

【讨论】：