0

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

4

1 回答 1

2

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

我将您的小提琴复制到 SO 代码片段中：

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

于 2017-11-28T14:11:14.753 回答