Petit soucis avec des radio button générés dynamiquement

Par Nanou*, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mes radio buttons. Ma table se remplie parfaitement grâce à un call ajax mais dés que j'essaye de selectionner un film rien ne se passe, j'ai beau avoir essayé d'enclancher une alerte à chaque click rien n'y fait. Les radio buttons semblent ne jamais passer à "checked".

Mon code HTML:

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

$(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; } }); }};

Je dois passer à côté de quelques choses :(

Merci d'avance pour votre aide .

5 réponses

keulu, il y a 9 ans

je dit pas que c'est ca, mais il me semble que faire

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

va enclencher le listener sur des boutons qui ne sont pas encore présent. qui n'arrive qu'après (suite a l'ajax).

essaye de placer ca dans le success de ton ajax qui demande la liste de bouton radio (une fois que tes boutons sont affichés)

Lartak, il y a 9 ans

Bonsoir.
Tu utilises mal la fonction on, lorsque tu définis un sélecteur en deuxième argument de la fonction, celui-ci peut ne pas être présent au moment du chargement de la page, par contre le premier sélecteur doit être présent dans le DOM au moment du chargement de la page.
Il te faut donc faire quelque chose comme ça :

$('#row').on('click', 'input[type=radio]', function() { if($(this).is(':checked')) { //... } });

Vu que le sélecteur #row est présent au moment du chargement, même si le second sélecteur, soit input[type=radio] n'y est pas, ça pourra fonctionner.
Pour plus de renseignements : Tutoriel Vidéo jQuery » jQuery.on().

Huggy, il y a 9 ans

@keulu @lartak +1
Première chose à faire :regarder la vidéo "jquery on" pour bien comprendre le fonctionnement des évènements

Nanou*, il y a 9 ans

Bonjour,

Merci infiniment pour vos réponses.

('#row').find('input[type=radio]').on('change',function(){ if((this).is(':checked')) {alert ("it's checked");}
}); => fonctionne parfaitement

tribal, il y a 9 ans

Pense à fermer le sujet si il est résolu stp