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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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