Question

通过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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

**更新**

虽然没有弄清楚它为什么不起作用，因为它在代码的其他部分以这种方式工作，将其更改为以下工作。因此，如果您遇到类似问题，请尝试此操作。

$('#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

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

**解决方案**

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

Answer 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>

Answer 2

看起来好像你没有包含jquery脚本。您的代码段中没有jQuery。将其添加到html页面：

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

Answer 3

我认为你的选择器就是问题所在。我甚至不确定输入[name = ...]是否有效（而不是我的无知证明它不是有效的。）

将您想要受影响的所有输入提供给同一个类，然后从该类触发。

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

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

单选按钮更改/单击无法正常工作

3 个答案: