uikit 3 catch events

Question

Ich benutze uikit v3 und versuche, Klicks in einem uikit lightbox/slideshow zu protokollieren. Nach dem Event "itemshow" möchte ich eine Log-Anfrage an piwik schicken. Die piwik-Anfrage ist nicht das Problem, aber ich kann das Ereignis "itemshow" nicht abfangen. 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

Das Problem mit Ereignissen ist, dass es ausgelöst wird tatsächlich nicht auf das Element selbst (wie die docs sagt), aber es auf dem Dokument ausgelöst wird, und ein Element zielt, das wurde von UIKit erstellt und bezieht sich während der Belastung Ihres JS nicht verfügbar (das ist, warum wir delegierten Selektor hier)

ich Ihre Geige in SO-Code-snippet kopiert:

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