Radio button click event is not getting fired

Question

This may seem to be duplicate question as people already asked such question and I read the answers too. But still this is not working for me. When I click on radio button, nothing happens. Below is my HTML code:

<div id="bank-details" class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
            <input type="radio" id="bank" name="pmt-method-radio" value="ACCOUNT" checked="checked">
             <label for="bank">Checking Or Savings Account </label>

              <input type="radio" id="card" name="pmt-method-radio" value="CARD">
              <label for="card">Credit/Debit Card</label>

    </div>
</div>

And below is my jquery code:

$('input[type="radio"]').click(function(){
    alert("fired");
    alert($("input[name=pmt-method-radio]:checked").val());

    });

Possible duplicate of [JQuery $(#radioButton).change(...) not firing during de-selection](http://stackoverflow.com/questions/5176803/jquery-radiobutton-change-not-firing-during-de-selection) — Suren Srapyan, Aug 12 '16 at 06:37

score 0 · Answer 1 · answered Aug 12 '16 at 06:32

0

Use jquery when document ready

$( document ).ready(function() {
    $('input[type="radio"]').click(function(){
    alert("fired");
    alert($("input[name=pmt-method-radio]:checked").val());

    });
});

The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above. The ready() method specifies what happens when a ready event occurs.

answered Aug 12 '16 at 06:32

Aman Rawat

2,625
1
25
40

1

Why not flag this as a duplicate then? – Alexander O'Mara Aug 12 '16 at 06:34
This can be due to some error in your js. If you are using chrome press f12 and check if there is any error in js or not – Aman Rawat Aug 12 '16 at 06:59

score 0 · Answer 2 · answered Aug 12 '16 at 07:33

0

Here is the working piece with your code only without any changes

https://jsfiddle.net/zooym4ow/

Common mistakes one usually make.

Either jquery library is not included or it's not included before the mentioned code.

Radio button was not loaded in browser when the code was getting executed. This happens if the code was included within <head> tag.

To handle this, either wrap your code within document.ready event handler as mentioned by @AmanRawat or put all of your code at the end in <body> as shown below.

$(document).ready(function(){
   //Your code goes here
});

OR

<body>
   <!-- Your DOM elements here -->
   <script>
      //Your code goes here
   </script>
</body>

answered Aug 12 '16 at 07:33

Varun Singh

310
2
10

Got my mistake. If I write the function this way: $(document).on('click', 'input[name="pmt-method-radio"]', function(){ //code }); Then it works. – Teddu Aug 12 '16 at 08:37
Is the specified radio button being dynamically added to DOM based on some action?? If it is static or already existing, existing code should work as shown in jsfiddler url. @Teddu – Varun Singh Aug 12 '16 at 09:33

Radio button click event is not getting fired

2 Answers2