javascript - 当屏幕上有由函数动态创建的多个元素时，具有 attr() 函数的函数不会执行所有语句

Question

下面的函数在屏幕右端创建一个红点，animate() 将其向左移动，单击时，其 src 文件应该更改，以及其他一些内容，如下所示:

function spawnEnemy()
{
    $("body").prepend("<img src='red_dot.png' class='enemies' id='enemy' style='left:calc(" + thewidth/2 + "px)'/>");
    $("#enemy").attr("id", "enemy"+i);
    $("#enemy"+i).css({"left" : thewidth+'px', "top" : (randomInt(10,500))+'px'});
    $("#enemy"+i).animate({left :'-400px'}, 20000);
    $("#enemy"+i).click(function()
    {
      var snd = new Audio("laser.mp3");
      snd.play(); //function stops here
      $("#enemy"+i).stop();
      $("#enemy"+i).attr("src","explosion.gif");
      $("#enemy"+i).css({"transform" : "scale(0.11,0.11)"});
      setTimeout(function()
      {
        $('#enemy'+i).hide();
      }, 350);
    });
    i+=1;
  }

该函数每六秒执行一次。但是，如果在创建新元素之前未单击该元素，则单击时所有元素都会在我放置注释的行处停止执行。我检查了控制台，但找不到任何有值(value)的东西，尽管我知道问题不在于 id，因为它们在控制台中都有不同的 id，而且我可以听到 snd.play() 的声音并且看不到 snd.play() 之后的语句的任何效果，我确定问题就在那里。仅当创建多个元素时才会出现此问题，因为如果我在六秒之前(即再次执行该函数之前)单击该元素，它们都会正常执行。另外，thewidth 只是一个预定义的全局变量，所以它不相关。我对 jquery 很陌生，所以如果我遗漏了一些明显的东西，我深表歉意。编辑:好的，现在即使屏幕上只有一个元素，所有语句都不会执行。我完全迷失了。

Answer 1

好的，我想我明白发生了什么。您需要在回调中使用 $(this) 引用敌人，因为 i 位于封装范围内，这意味着它可以更改并破坏该回调的内部范围:

在此过程中，我稍微清理了您的 jQuery 代码以简化它。

function spawnEnemy() {
    $('<img />', {
        id: 'enemy' + i, 
        src: 'red_dot.png', 
        className: 'enemies', 
        style: 'left: ' + thewidth / 2 + 'px; top: ' + randomInt(10,500) + 'px'
    })
    .prependTo($('body'));
    .animate({left :'-400px'}, 20000);
    .click(function() {
        var snd = new Audio("laser.mp3");
        snd.play(); //function stops here
        $(this).stop();
        $(this).attr("src","explosion.gif");
        $(this).css({"transform" : "scale(0.11,0.11)"});
        setTimeout(function() {
            $(this).hide();
        }.bind(this), 350);
    });
    i+=1;
}