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!?
Assign the listener to the rendered elements instead of the hidden ones:
$('.radio .pretty_rb').on('click', function() {
updateListingForm('list_in');
});
Try this,
$('.radio').on('click', function() {
updateListingForm('list_in');
});
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');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.