Question

我正在制作一个匹配的游戏，想法是向两侧附加5张图像，然后在左侧添加第6张图像，用户必须点击最后添加的图像，然后它将被删除并且另外6个图像将被添加到左侧（5到右侧），然后用户将必须单击左侧div中的第11个图像，在第一次单击时每个项目按预期运行但在此之后，当我单击时最后添加的图像没有发生!!。

我已经尝试过访问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>

Answer 1

您的代码：

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

在此.click()上运行的$(document).ready()事件处理程序将专门绑定到它在运行时匹配的元素 - 但它不会动态地将未来元素与该选择器匹配。

在不变的父元素上使用.on()处理程序将解决此问题：

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

动态定位div的最后一个孩子（匹配游戏）

1 个答案: