YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar marco.rensch Online asked

manual switcher call blocks interactions inside

Hi

I have to build a switcher in uikit 3 which allows me to select some options, after all "pages" of the switch are done a button has a send function for the array of checked elements.

Here is a demo of the result: http://share.nx-designs.ch/uikitproblem/

as you can see the checkboxes are not clickable...

Because of the fact that i have to load the Switcher Content from external i fill up the switcher (and its pages) based on Arrays like:
var fragen = ['Questiontext 1', 'Questiontext 2','Questiontext n' ];
var antworten = [['Die erste Eantwort','1-2','1-3'],['2-1','2-2','2-3'],['foo','bar','things','stuff','others']];

And the Code:
$(document).ready(function(){
for(var i=0;i<fragen.length; i++){
$('#switcher').append('<li><div class="uk-card-header"><h4>'+fragen[i]+'</h4></div><div class="uk-card-body" id="antwortendiv_'+i+'"></div></div>');
for(var n=0;n<antworten[i].length; n++){
$('#antwortendiv_'+i).append('<div class="" uk-grid><label><input type="checkbox" class="checkbox uk-checkbox"> '+antworten[i][n]+'</label></div>');
}
$('#switcher').append('</li>');

        if(i === fragen.length-1){  
            UIkit.switcher('#switcher');  
        }  
    }  
});

HTML:
<div class="uk-card" id="questionsdiv">
<ul uk-switcher>
<li>Switch</li>
<li>Another</li>
</ul>
<ul id="switcher" class="uk-switcher">

            </ul>  
        </div>

I have to add the UIkit.switcher('#switcher'); to show the first element on start, if i don't do it the first panel / question is not showing.
But if i add this manual call - checkboxes INSIDE the switcher are not clickable.

Is there any parameter i can pass to the switcher?
If i leave this part "UIkit.switcher('#switcher');" out i have to klick on the first Navigation to show up a switcher panel and checkboxes are working...

in use:
uikit v3 b28
jquery 3.2.1

thanks for your input

  • UIkit

Edited

Know someone who can answer? Share a link to this question via email or twitter.