Bootstrap popover with dynamic content breaks custom checkbox CSS functionality

Question

Please take a look at my sample code.

I have custom checkboxes which use Font Awesome's icons. It all works fine until I use custom popover content, which I load on document.ready.

When the content is loaded this way (instead of specifying content directly in the anchor element), the checkboxes stop working (cannot check them).

Any ideas why?

Here's a working example, where the content is set directly.

FYI, the relevant CSS code that lets the Font Awesome checkbox look like it's been checked is:

input[type=checkbox]:checked + label:before { content: "\f046"; }

Answer 1

Apply This CSS.

input[type="checkbox"] {
display: block;
height: 21px;
opacity: 0;
position: absolute;
width: 20px;
left:0;
top:0;
z-index: 999;}
.test{position:relative}

also HTML

<div class="test"><input id="box1" type="checkbox" />
<label for="box1">Checkbox 1</label>
</div>
<div class="test">
    <input id="box1" type="checkbox" />
    <label for="box1">Checkbox 2</label>
</div>
<div class="test">
    <input id="box1" type="checkbox" />
    <label for="box1">Checkbox 3</label>
</div>