CODEWITHSUNDEEP
jqueryhtml
Jason G
Jason G

Reputation: 2743

Radio Button change / click not working

Dynamically loaded via AJAX

here is the head section

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

Variations of the above code work for all my other inputs / buttons on the same page / load. Range inputs work, other radio / checkboxes work. I've tried change / click. I've tried with :radio and without. I've tried changing the names, changing the selector, changing the parent selector, nothing will get the radio buttons to fire.

** Update **

while not figuring out why it was not working, as it works this way in other sections of the code, changing it to the following did work. So if you are having a similar issue, try this.

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

and

<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

I still use the 'bag' of the view_profile, and this is the method for attaching to dynamically loaded content via ajax.

** Solution **

Appears to have been a JS cache issue as suggested by Rob.

Upvotes: 0

Views: 379

Answers (3)

rob
rob

Reputation: 2144

I think your selector is the problem. I'm not even sure if input[name=...] is valid (not that my ignorance is proof that it isn't valid).

Give all the inputs you want to be affected the same class, and then just trigger from the class.

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

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

Upvotes: 0

Tinsten
Tinsten

Reputation: 356

It appears as if you are not including the jquery script. Your code snippet has no jQuery in it. Add this to the html page:

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

Upvotes: 0

oguzhancerit
oguzhancerit

Reputation: 1572

$("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>

Upvotes: 1

Related Questions