click not triggering when radio button is moved outside the label

Question

I have a radio option inside a label , so once a user clicks it posts a request. So I want to add a border around the label, but when I move the radio button outside the label the click doesn't work.

$(document).on('click', '[name^=\'option\']', function() {
    console.log("clicked");
});

The click function works fine with the below HTML

<label class="radio">
    <input type="radio" class="radio" style="display:none;" name="option[333223]" value="2485">
    <img class="less-border" src="a3-100x100.png" alt="A4 21 x 29,7 cm">           
</label>

This doesn't work

<input type="radio" class="radio" style="display:none;" name="option[333223]" value="2485">
<label class="radio">
    <img class="less-border" src="a3-100x100.png">
</label>

I want to make sure the border is added to the label if selected

input[type="radio"]:checked + label {
    border: red 1px solid;
}

Can someone tell me what might be causing this issue?

Answer 1

You missing id in radio button and for attribute in label both are same when properly work

 <input type="radio" class="radio" style="display:none;" id="test" name="option[333223]" value="2485">
 <label class="radio" for="test">
   <img class="less-border" src="a3-100x100.png">
 </label>