Having trouble with jQuery "on" click

Question

I am trying to fire a function from either radio button when they are clicked but it doesn't seem to be working.

My code:

$('.radio [name=list_in]').on('click', function() {
    updateListingForm('list_in');
});

My HTML:

<div class="fields">
    <div class="radio">
        <div class="pretty_rb styledRadio" style="background-image: url('images/form-radio-icons.png'); width: 19px; height: 20px; cursor: pointer; background-position: 0px -20px;"><input type="radio" checked="" value="auction" class="pretty_rb" id="list_site" name="list_in" style="display: none;"></div><label for="list_site">Site</label>
    </div>
    <div class="radio">
        <div class="pretty_rb styledRadio" style="background-image: url('images/form-radio-icons.png'); width: 19px; height: 20px; cursor: pointer; background-position: 0px 0px;"><input type="radio" value="store" class="pretty_rb" id="list_store" name="list_in" style="display: none;"></div><label for="list_store">Store</label>
    </div>                    
    <div class="contentClear"></div>
</div>

I am using a jQuery plugin to style the radio fields and this is the HTML it outputs, so that is why the normal radio fields are hidden.

I can't use the onclick event because of this reason; that's why I tried using the on here but I can't seem to get it to fire?

What am I doing wrong!?

Answer 1

Assign the listener to the rendered elements instead of the hidden ones:

$('.radio .pretty_rb').on('click', function() {
    updateListingForm('list_in');
});

Answer 2

Try this,

$('.radio').on('click', function() {
    updateListingForm('list_in');
});

Answer 3

I guess you miss a $(document).ready(function() {...});

This code works for me:

$(document).ready(function() {
    $('.radio [name=list_in]').on('click', function() {
        alert('It works');
    });
});