在“单击” jQuery时遇到麻烦

Question

我试图在单击任一单选按钮时触发功能，但似乎无法正常工作。

我的代码：

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

我的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>

我使用的是jQuery插件来设置无线电字段的样式，这是它输出的HTML，因此这就是隐藏常规无线电字段的原因。

由于这个原因我无法使用onclick事件; 这就是为什么我尝试on此处使用on的原因on但似乎无法启动它？

我究竟做错了什么！？

Answer 1

将侦听器分配给呈现的元素，而不是隐藏的元素：

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

Answer 2

尝试这个，

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

Answer 3

我想您会错过$（document）.ready（function（）{...}）;

该代码对我有用：

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