Mes radio button générés dynamiquement ne fonctionnent pas

[Nanou*]

Bonjour,

Alors voila ce que j'essaye de faire c'est pouvoir sélectionner un film/ un row d'une table HTML qui a été remplie dynamiquement grâce à un call Ajax. Le remplissage se fait sans problème, mais lorsque j'essaye de checker si mes radio buttons passent à "checked" si on clique dessus (grâce à une alerte qui se déclencherait si c'est bien le cas), là rien ne se passe . Ils semblent ne jamais changer d'état.

Mon code HTML :

Code : Tout sélectionner

<input class="input" type="text" placeholder="Find a movie" id="movie">
<table class="table>
<thead>
<tr>
      <th></th>
      <th>Poster</th>
      <th>Id</th>
      <th>Title</th>
      <th>Release Date</th>
      <th>Rating</th>
      <th>Overview</th>
    </tr>
<thead>
<tbody id="row">
 </tbody>
 <tfoot>
 <tr>
      <th>
        <button id="envoyer">
          Envoyer
        </button>
      </th>
    </tr>
 </tfoot>
 </table>

Mon code JS:

Code : Tout sélectionner

$(document).ready(function() {
$("#movie").autocomplete({
        minLength: 3,
        delay: 1000,
        source : function( request, response ) {
            var url = 'http://api.themoviedb.org/3/',
                mode = 'search/movie?',
                key = 'api_key=cf3e685cc5569f10860120ea17c8d255',
                query = '&query=',
                adult = '&include_adult=false';
            var input = $('#movie').val();
            var movieName = encodeURI(input);

            $.ajax({
                type: 'GET',
                url: url + mode + key + query + movieName + adult,
                dataType: 'json',
                success: function(data) {
                    ajax.parseJSONP(data);

                },
                error: function(xhr,status,error) {
                    console.log(error.message);
                    console.log (xhr.responseText);

                }
            });
        }
    });

    $(".radio_button").on(click,input[type=radio], function(){
        if($("input[type=radio]").is(':checked')){
            alert("checked");
        }
    });
    });

  var movieInfo = {
        id : null,
        result : null
    };

var ajax = {
    parseJSONP:function(result){
        movieInfo.result = result.results;
            $.each(result.results, function (i, row) {
                if(i < 7) {
                console.log(JSON.stringify(row));
                $('#row').append('<tr>
                <td class="radio_button"><input type="radio" name="movie" id="'+row.id+'"></td>
                <td><img src="http://image.tmdb.org/t/p/w92'+row.poster_path+'"alt="https://cdn.browshot.com/static/images/not-found.png" style="width:100px; height:auto;"></td>
                <td>'+row.id+'</td>
                <td>' +row.title+ '</td>
                <td>' +row.release_date+ '</td>
                <td>' + row.vote_average + '</td>
                <td>' +row.overview+ '</td>
                </tr>');
                } else {
                    return false;
                }
            });
    }};

[webmaster]

Bonjour,

Le morceau de code ne charge pas la liste des films.
Donc difficile d'être affirmatif sur la solution car je ne vois pas à quoi ressemble l'affichage d'une ligne

Je pense que le problème vient du timing de création de l'event click sur les .radio_button

Au moment ou l'appel est fait, les .radio n'existent sans doute pas encore.
Il faudrait vérifier avec un code du genre

Code : Tout sélectionner

console.log( $(".radio_button").length);