jQuery“on”点击时遇到问题答案

【问题标题】：Having trouble with jQuery "on" clickjQuery“on”点击时遇到问题
【发布时间】：2014-01-19 17:16:28
【问题描述】：

我试图在单击任一单选按钮时触发一个功能，但它似乎不起作用。

我的代码：

$('.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，这就是隐藏普通单选字段的原因。

由于this reason，我无法使用onclick 事件；这就是为什么我在这里尝试使用on 但我似乎无法启动它？

我做错了什么！？

【问题讨论】：

您能否将点击监听器分配给呈现的按钮而不是隐藏的按钮？
$(document).on('click','.radio [name=list_in]',function(){ updateListingFrom('list_in'); });试试这个
附加点击事件的方式有问题。我认为它没有被调用，我创建了这个 jsfiddle 并且它有效。您是否将点击代码包装在 $(document).ready(function(){/*your code*/}) 中？

标签： javascript jquery onclick jquery-on

【解决方案1】：

将监听器分配给渲染的元素而不是隐藏的元素：

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

【讨论】：

啊，是啊，我真傻，应该想到那个哈哈.....我唯一的问题是我必须把它们放在一个 ID 中以避免它应用于页面上的其他无线电字段，不过没什么大不了的......谢谢！
是的，您需要一种方法来区分它们，但这是基本思想。不客气，很高兴你把它整理出来！ :) 有趣的是没有人费心阅读完整的问题......

【解决方案2】：

试试这个，

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

【讨论】：

【解决方案3】：

我猜你错过了 $(document).ready(function() {...});

此代码适用于我：

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

【讨论】：

on() 方法似乎只适用于可视元素，您可以使用 deleagte 代替： $(document).ready(function() { $('body').on('click ','.radio [name=list_in]',function(){ alert("This works"); }); });