单选按钮更改/单击不起作用答案

【问题标题】：Radio Button change / click not working单选按钮更改/单击不起作用
【发布时间】：2016-11-07 19:06:08
【问题描述】：

通过 AJAX 动态加载

这里是头部

<head>
    <link rel="stylesheet" type="text/css" href="templates/main.css">
     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

     <script src="js/main.js"></script> 
</head>

$('.vp_names').on("change", "input[name='vp_names']", function(event) {
		alert('got here'); // NEVER FIRES		
})

<div class='vp_names'>
  <input id="vp_names_1" checked name='vp_names' value='1' type='radio'/>
  <label class="drinkcard-cc label_card male" for="vp_names_1">George</label>
  <input id="vp_names_2" name='vp_names' value='2' type='radio'/>
  <label class="drinkcard-cc label_card male" for="vp_names_2">Jungle</label>
</div>

上述代码的变体适用于我在同一页面/加载上的所有其他输入/按钮。范围输入工作，其他收音机/复选框工作。我试过改变/点击。我试过 :radio 和没有。我试过更改名称、更改选择器、更改父选择器，但没有任何东西可以触发单选按钮。

** 更新**

虽然不知道为什么它不工作，因为它在代码的其他部分以这种方式工作，但将其更改为以下确实有效。所以如果你有类似的问题，试试这个。

$('#view_profile').on("change", ".vp_names", function(event) {
    alert('got here');
}

和

<input class='vp_names' id="vp_names_1" checked name='vp_names' value='1' type='radio'/>
<label class="drinkcard-cc label_card male" for="vp_names_1">John</label>

Removed class from parent div

我仍然使用 view_profile 的“包”，这是通过 ajax 附加到动态加载的内容的方法。

** 解决方案**

似乎是 Rob 建议的 JS 缓存问题。

【问题讨论】：

有什么错误吗？页面上有 jQuery 吗？
$ is not defined 表示页面上没有 jQuery。
没有错误，一切都已定义

标签： jquery html

【解决方案1】：

$("body").on("click","input[name='vp_names']" ,function(event) {
    alert('got here'); // FIRES
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vp_names'>
  <input id="vp_names_1" checked name='vp_names' value='1' type='radio'/>
  <label class="drinkcard-cc label_card male" for="vp_names_1">George</label>
  <input id="vp_names_2" name='vp_names' value='2' type='radio'/>
  <label class="drinkcard-cc label_card male" for="vp_names_2">Jungle</label>
</div>

【讨论】：

你是用 ajax 加载的吗？

【解决方案2】：

我认为您的选择器是问题所在。我什至不确定 input[name=...] 是否有效（并不是我的无知证明它无效）。

将您想要影响的所有输入都放在同一个类中，然后从该类中触发。

<input type="radio" class="vp_radio" ... /> 

$(document).ready(function(){ 
    $('.vp_radio').on('change', function(){ 
        //logic
     });
 });

【讨论】：

我将此选择器用于范围、按钮和复选框，没有问题。但是，我不知道一切，可能做错了什么，这就是我发布这个的原因。我确实试图给他们上一堂课，但仍然没有用。这很奇怪，因为我有其他相同的代码，除了在同一个加载页面中的名称/位置，它可以工作。
您的控制台中是否有任何日志？奇怪的是，这个元素根本不会触发而不触发某个地方的问题。
我不知道为什么，我刚进去再试一次（良好的完整性检查） - 使用相同的风格，但在收音机上改为上课，现在它被解雇了。不知道为什么它适用于某些人而不适用于其他人，但至少它现在有效！
脚本在您的 html 文件中，还是作为库包含在内？如果您包含它而不是内联编写脚本，您可能只需要破坏缓存。很高兴它正在工作！感谢您教我一些有关输入选择器的知识！
它链接在标题中。我现在切换回去，看看它是否适用于两种方式。没有考虑缓存，但可能是这样。

【解决方案3】：

看起来好像您没有包含 jquery 脚本。您的代码 sn-p 中没有 jQuery。将此添加到 html 页面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：