divの最後の子を動的にターゲティングする（一致するゲーム）

私はマッチしたゲームを作っています。その考え方は、5つの画像を両面に追加してから、6番目の画像を左側に追加することです。その最後に追加された画像をクリックするとそれが削除され、残りの6つの画像が左側に追加され（5つ目の右側）、ユーザーは最初のクリックで左のdivの11番目の画像をクリックする必要がありますすべてが意図どおりに動作しますが、その後、最後に追加されたイメージをクリックしても何も起こりません!!divの最後の子を動的にターゲティングする（一致するゲーム）

divの最後の子にアクセスするあらゆる方法を試しましたが、すべて同じ問題を返しました。

これは全体のコード::

<!DOCTYPE html> 
<html> 
<head> 
    <title>Pick The Difference !</title> 
    <meta charset="utf-8"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> 
</head> 
<style type="text/css"> 
    body { 
     display: flex; 
     flex-wrap: wrap; 
     margin:auto; 
     width:1000px; 

     background-color: blue; 
    } 
    #left { 
     width : 495px; 
     height : 600px; 
     background-color : yellow; 
    } 
    #mid { 
     width : 10px; 
     height : 600px; 
     background-color : black; 
    } 
    #right { 
     width : 495px; 
     height : 600px; 
     background-color : orange; 
    } 
    div { 

    } 
    img:hover{ 
     background-color: blue; 
    } 
    img { 
     position: absolute; 
     border:10px; 
     border-radius: 300px; 
     height: 100px; 
     width: 100px; 
    } 
    .leftimg{ 
     margin-left: 181px; 
    } 
    .rightimg{ 
     margin-left: 691px; 
    } 
</style> 
<body> 
<div id="left"></div> 
<div id="mid"></div> 
<div id="right"></div> 
</body> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     function generate(){ 

      for (var i=0; i<5; i++) { 
       var randTop = Math.floor(Math.random()*500); 
       var randLeft = Math.floor(Math.random()*401); 
       $("#left").append('<img class="leftimg" src="http://bahaazidan.pe.hu/Smiley.png" style="top:' +randTop+'px;'+'left:'+randLeft+'px";'+ '/>'); 
       $("#left").append('<img class="rightimg" src="http://bahaazidan.pe.hu/Smiley.png" style="top:' +randTop+'px;'+'left:'+randLeft+'px";'+ '/>'); 
      } 
      $("#left").append('<img class="leftimg" src="http://bahaazidan.pe.hu/Smiley.png" style="top:' +Math.floor(Math.random()*500)+'px;'+'left:'+Math.floor(Math.random()*401)+'px";'+ '/>'); 
     } 
     generate(); 
     $("#left img:last-child").click(function(){ 
      $("#left img:last-child").remove(); 
      generate(); 
     }); 

    }); 
</script> 
</html>

出典

2016-12-30 BahaaZidan

参照[この質問]（http://stackoverflow.com/questions/5589491/jquery-click-event-after-appending：この問題を解決します不変の親要素に.on()ハンドラを使用して

-content） –

あなたのコードです：

$("#left img:last-child").click(function() { 
    $("#left img:last-child").remove(); 
    generate(); 
});

このような$(document).ready()上で実行されている.click()イベントハンドラは、それが実行時に一致していることを要素に特異的に結合します - しかし、そのセレクタと将来の要素を動的にマッチさせることはありません。

$("#left").on('click', 'img:last-child', function() { 
    $(this).remove(); 
    generate(); 
});

出典

2016-12-30 19:21:49

ありがとうたくさんのm8、それは働いた。あなたは "これ"私に説明してください – BahaaZidan

@ BahaaZidan喜んで、それは助け、そして確かに。要素に結び付けられたjQuery関数の中にいるとき、 '$（this）'は現在の要素を参照するjQueryセレクタです。この場合、それは 'img：last-child'です。詳細はこちら：https://remysharp.com/2007/04/12/jquerys-this-demystified –

divの最後の子を動的にターゲティングする（一致するゲーム）

答えて

関連する問題