uikit 3捕获事件

问题描述

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

I use uikit v3 and I'm trying to log clicks in a uikit lightbox/slideshow. After the event "itemshow" I would like to send a log request to piwik. The piwik request is not the problem, but i'm not able to catch the event "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/

推荐答案

事件的问题是，它实际上不是在元素本身上触发的(如文档所述)，而是在文档上触发的并且是针对性的由UIKit创建的元素，在加载JS期间不可用(这就是我们在此处使用委托选择器的原因)

The problem with events is, that it actually is not triggered on the element itself (as the docs says), but it is triggered on the document and is targeting an element, that was created by UIKit and is not available during the load of your JS (that's why we use delegated selector here)

我将您的小提琴复制到了SO代码段中:

I copied your fiddle into SO code snippet:

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

这篇关于uikit 3捕获事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！