Les liens html générés dynamiquement fonctionnent dans Firefox mais ne fonctionnent pas dans Chrome

Question

J'essaie de créer une application pour afficher les vidéos YouTube en fonction des catégories. L'utilisateur affiche une liste déroulante de catégories, il sélectionne une catégorie. Un div 'rContent' est rempli avec une liste de liens dans cette catégorie. Lorsqu'un internaute clique sur l'un des liens, la vidéo YouTube s'ouvre dans un cadre iFrame. Le problème est lorsqu'un utilisateur clique sur le lien que la vidéo est affichée dans Firefox mais ne fonctionne pas dans Chrome. Rien ne se passe.

<!-- Dynamically retrieved list of videos shown here, see sample below --> 
<div id="rContent"></div>    

<!-- YouTube video will be shown in this iframe--> 
<div class="video-container"> 
    <iframe id="userVideo" src="" frameborder="0" width="560" height="315"></iframe> 
</div> 

<script>  
$("#rContent").on('click', '.vid_trigger', function() { 
    var URL = $(this).attr('href'); 
    $(userVideo).attr('src',URL) 
    return false; 
}); 
</script> 

<!--- sample of dynamic content --> 
<a class="vid_trigger" href="http://www.youtube.com/embed/fgqpHl5OGFA?rel=&autoplay=1"> … </a><br></br> 
<a class="vid_trigger" href="http://www.youtube.com/embed/c-d4rDY70zk?rel=&autoplay=1"> … </a><br></br> 

Answer 1

Cette ligne

$(userVideo).attr('src',URL) 

devrait être quelque chose comme ceci:

$('#userVideo').attr('src', URL); //select using id selector 

Answer 2

Avez-vous déjà essayé le preventDefault? Vous devriez utiliser preventDefault qui est le comportement par défaut lorsque vous cliquez sur le lien. Outre les liens ne doit pas être dans le div #rContent?

Vous utilisez .on donc les liens doivent être à l'intérieur du parent.

Answer 3

<!-- Dynamically retrieved list of videos shown here --> 
<div id="rContent"> 
    <a class="vid_trigger" href="http://www.youtube.com/embed/fgqpHl5OGFA?rel=&autoplay=1"> … </a><br></br> 
    <a class="vid_trigger" href="http://www.youtube.com/embed/c-d4rDY70zk?rel=&autoplay=1"> … </a><br></br> 
</div>    

<!-- YouTube video will be shown in this iframe--> 
<div class="video-container"> 
    <iframe id="userVideo" src="" frameborder="0" width="560" height="315"></iframe> 
</div> 

<!-- script must be placed after DOM elements --> 
<script type="text/javascript">  
    $("#rContent").on('click', '.vid_trigger', function() { 
     $('#userVideo').prop('src', this.href) 
     return false; 
    }); 
</script> 

FIDDLE