Why doesn't the onclick JS?

<label>
 <input type="radio" class="iCheck fu" name="reason" data-skin="square" value="1">Pickup Address
</label>
<div class="clear10"></div>
<label>
 <input type="radio" class="iCheck fu" name="reason" data-skin="square" value="2">Drop-off Address
</label>
<div class="clear10"></div>
<label>
 <input type="radio" class="iCheck fu" name="reason" value="3">Service Address
</label>

$('.fu').on('click',function () {
console.log('ok')
});

but when the page loads, the html becomes like this
<label class>
 <div class="iradio_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" class="iCheck fu" name="reason" data-skin="square" value="1" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>Pickup Address
</label>
<div class="clear10"></div>
<label class>
 <div class="iradio_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" class="iCheck fu" name="reason" data-skin="square" value="2" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>Drop-off Address
</label>
<div class="clear10"></div>
<label class>
 <div class="iradio_flat-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" class="iCheck fu" name="reason" value="3" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div>Service Address
</label>
July 9th 19 at 14:34
1 answer
July 9th 19 at 14:36
If you take the 1st html and js everything works

So it's not in the script

I can't tell more, because this is only

Find more questions by tags JavaScriptjQuery