uikit 3 catch events | 易学教程

问题

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/

回答1:

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)

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>

来源：https://stackoverflow.com/questions/47093268/uikit-3-catch-events

标签

javascript

jquery

getuikit