How to detect if this radiobutton is checked?

Question

I read a lot of things on stackoverflow, but nothing help me :(

I have this HTML table, loaded by ajax request :

<table class="table table-striped table-hover choix_annonce_table">
    <thead>
        <tr>
            <th>Sélection</th>
            <th>Visuel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="radio" value="45" name="idAnnonce"></td>
            <td><img alt="Annonce 1" src=""></td>
        </tr>
        <tr>
            <td><input type="radio" value="46" name="idAnnonce"></td>
            <td><img alt="Annonce 2" src=""></td>
        </tr>        
    </tbody>
</table>

I try to detect when radiobutton is checked, but no of the following issues work (in js file included on my "main" page):

$(document).ready(function() {
    $("input[name=idAnnonce]").click(function(){
        alert("xx");
    });
});

OR

$(document).ready(function() {
    $("input[name=idAnnonce]:radio").change(function () {
        alert("xx");
    });
});

Do you have in idea?

EDIT : when I load JS directly into my loaded table with ajax, it works. Why ?

Possible duplicate of [How to use radio on change event?](http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event) — robbmj, Dec 24 '15 at 16:33
Possible duplicate of [Find out if radio button is checked with JQuery?](http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery) — Heroselohim, Dec 24 '15 at 16:36

Jed Fox · Answer 1 · 2015-12-24T16:40:23.450

3

This happens because the .click() and .change() methods, along with all other event handlers, only watch for these events on elements that are present at the time the events are attached.

To solve this, instead of using this:

$('input[name=idAnnonce]').change(function() {
    // ...
});

Use something like this instead:

/* Use 'body' or any element that will contain the form */
$('body').on('change', 'input[name=idAnnonce]', function() {
    // ...
});

This will watch for click events passing up to the body, and only call the function for those that match the selector.

edited Dec 24 '15 at 16:40

answered Dec 24 '15 at 16:32

Jed Fox

2,979
5
28
38

Good answer, but you should use the `change` event on radio and checkbox inputs so that the event also fires when the selection is changed via the keyboard. – Rory McCrossan Dec 24 '15 at 16:39
@RoryMcCrossan I’ve added that. Thanks! – Jed Fox Dec 24 '15 at 16:40
No, it does'nt work :( I have added your method into my global js file, and nothing happend – bahamut100 Dec 24 '15 at 16:41
@bahamut100 What happens? Does it throw an error, or is it not called? – Jed Fox Dec 24 '15 at 16:42
In your debug console, does `$('body input[name=idAnnonce]').length` return ≥ 1 after loading the form? – Jed Fox Dec 24 '15 at 17:00

score 1 · Answer 2 · answered Dec 24 '15 at 16:28

If your javascript is loaded directly into the html file, then it's being executed in line as the html file is loaded and parsed. When the javascript is in a separate file, it needs to be invoked. You could do this by executing an "onload" function as part of your body tag statement. That part of your html is missing, so it's unclear whether you're actually loading anything when your table is loaded.
You can also execute these event monitors through a callback at the end of the ajax load.

score 1 · Answer 3 · answered Dec 24 '15 at 16:43

When loading the table via ajax, you will need to bring in the javascript through the ajax call. Meaning the table that comes in should also contain the javascript that references the table. The DOM on the parent page doesn't know about the table, so the javascript on the parent page won't act on new content.

score 0 · Answer 4 · answered Jul 20 '16 at 12:46

0

$(document).ready(function() {
  $('input[type=radio][name=idAnnounce]').change(function(evt) {
  console.log(evt.target.value)
  });
});

The selector you were using was wrong.

The above code should help

cheers

answered Jul 20 '16 at 12:46

khem poudel

587
7
13

How to detect if this radiobutton is checked?

4 Answers4