ループが動作していない間に生成されたボタンをクリック

Question

私は、動的データを受け取る順序付けられていないリストを持っています。mysqlデータベースは、リストが私にタイトルのサムネイルと各ビデオの完全なビューを返します。 divをcss disply noneと表示してこのリンクを受け取るdivを表示してビデオを表示すると、最初の再生ボタンが隠れてdivを表示し、他のボタンは動的に作成され、動作しない。ここで

は私のHTMLで、ここで

<div id="player"></div> 
<div class="divvideos"> 
    <ul> 
     <?php while($videolist = $resultvideos->fetch_array()){ ?> 
     <li class="listdivvideos"> 
      <button class="btplay" id="btplay"></button> 
      <img src="images/datahoraicon.png" class="imgdatahora"> 
      <ul> 
       <li><img src="http://i1.ytimg.com/vi/<?php echo $videolist['miniatura'] ?>/default.jpg"></li> 
      </ul> 
     </li> 
     <?php } ?> 
    </ul> 
</div> 

はdivのプレイヤーを表示し、非表示にする簡単なスクリプトが

<script> 
    $("#btplay").click(function() { 
     if($("#player").css("display") == "none") 
      $("#player").css("display","block"); 
     else 
      $("#player").css("display","none"); 
    }); 
</script> 

である私のコードは、ボタンをクリックすることで正常に動作しながら、PHPを介してデータバンクを受けますidボタンが押されてidプレーヤーとdivが表示されていますが、私の唯一の問題は、このボタンがホームラインに作成されているために、このボタンが数回作成されていることです。他のボタンが機能しない

Answer 1

まず、のIDは、というユニークな（上記のとおり）である必要があります。それらを残しておくか、それにカウンターを追加してください。

$(".btplay").click(function() { 

このトリックを行う必要があります。

ティップ：あなたはと

<?php while($videolist = $resultvideos->fetch_array()): ?> 
     //... 
<?php endwile; ?> 

そして

<?php echo $videolist['miniatura'] ?> 

と

<?php while($videolist = $resultvideos->fetch_array()){ ?> 
     //... 
<?php } ?> 

置き換えることができ

<?= $videolist['miniatura']; ?> 

私はそれがより読みやすくすると思うが、ちょうどtippです。