not working inside a dynamically generated content

[yuzrie]

Using Bootstrap 4.0, icheck-bootstrap from AdminLTE3

I have a modal that is cloned and triggered on click like so:

$('body').on('click', '.btn-modal-add-resource', function() {
        let modal = $('.resource-modal-template').clone().removeClass('.resource-modal-template')

        modal.modal()
        modal.on('hidden.bs.modal', function (e) { $(this).remove() })
})

and within that modal I have the html code:

<div class="form-group">
    <div class="icheck-primary">
        <input type="radio" id="someRadioId1" name="someGroupName" />
        <label for="someRadioId1">Option 1</label>
    </div>
    <div class="icheck-primary">
        <input type="radio" id="someRadioId2" name="someGroupName" />
        <label for="someRadioId2">Option 2</label>
    </div>
</div>

the radio button cannot be clicked. unless I removed the icheck-primary class and follow the normal radio button from bootstrap - but that'd be without the style.. normally for this kind of issue is about initializing the element from javascript. but this library is fully css

[pp1543]

I used this workaround to get it working:

/* fix icheck dynamically inserted */
[class*="icheck-"] > input {
z-index: 1;
cursor: pointer;
width: 22px;
height: 22px;
}

[TheMaverickProgrammer]

I used this workaround to get it working:

/* fix icheck dynamically inserted */
[class*="icheck-"] > input {
z-index: 1;
cursor: pointer;
width: 22px;
height: 22px;
}

wow this works for me on vuejs too. Thanks!

[heapsoftware]

Thanks for this so much, was fighting with this for 3 hours including google search and finally got a search query that landed me on here, this fixed it right up!