Jquery 来自bind的意外行为

我得到的不是单击绑定，而是控制台消息列表，好像Javascript正在立即执行绑定的操作，而不是创建绑定：

var biomes = new Array("glacier","desert","forest","grassland","hills","jungle","mountains","ocean","plains","swamp","tundra");


function changeTerrain(biome){
  console.log(biome);
}

$(document).ready(function(){
  // fill in terrain guide
    $.each(biomes,function(x,biome){
      $('div#terrainGuide').append("<div class='tile "+biome+"'></div>");
      $('div#terrainGuide:last-child').bind({
        click: changeTerrain(biome)
      });
    });
});

---

在绑定调用中必须使用匿名函数，即：

 click: changeTerrain(biome)

应该成为

 click: function(){ changeTerrain(biome); }

---

在绑定调用中必须使用匿名函数，即：

 click: changeTerrain(biome)

应该成为

 click: function(){ changeTerrain(biome); }

---

当您只需要绑定一次时，您似乎正在将同一事件处理程序绑定到要附加的所有元素

$.each(biomes,function(x,biome){
  $('div#terrainGuide').append("<div class='tile "+biome+"'></div>");
});

$('div#terrainGuide:last-child').bind({
    click: function(){
       changeTerrain(biome);
    }
});

---

当您只需要绑定一次时，您似乎正在将同一事件处理程序绑定到要附加的所有元素

$.each(biomes,function(x,biome){
  $('div#terrainGuide').append("<div class='tile "+biome+"'></div>");
});

$('div#terrainGuide:last-child').bind({
    click: function(){
       changeTerrain(biome);
    }
});

---

我认为你可以通过以下方式实现你想要的行为：

var biomes = new Array("glacier","desert","forest","grassland","hills","jungle","mountains","ocean","plains","swamp","tundra");

function changeTerrain(e){
  //gets the clicked child by calling e.target, and an small hack to get the child's biome
  console.log($(e.target).attr('class').split(' ')[1]);
}

$(document).ready(function(){
  // fill in terrain guide
    $.each(biomes,function(x,biome){
      $('div#terrainGuide').append("<div class='tile "+biome+"'>"+biome+"</div>");
    });
   //remove the bind from the loop and binds the click event to all .tile elements, which are #terrainGuide children
   $("div.tile").click(changeTerrain);
});

---

我认为你可以通过以下方式实现你想要的行为：

var biomes = new Array("glacier","desert","forest","grassland","hills","jungle","mountains","ocean","plains","swamp","tundra");

function changeTerrain(e){
  //gets the clicked child by calling e.target, and an small hack to get the child's biome
  console.log($(e.target).attr('class').split(' ')[1]);
}

$(document).ready(function(){
  // fill in terrain guide
    $.each(biomes,function(x,biome){
      $('div#terrainGuide').append("<div class='tile "+biome+"'>"+biome+"</div>");
    });
   //remove the bind from the loop and binds the click event to all .tile elements, which are #terrainGuide children
   $("div.tile").click(changeTerrain);
});

---

我试着在每个div.tile上绑定一次。你让我走上了正确的道路：`$.eachbiomes，functionx，biome{$'divterrainGuide'.append；$'divterrainGuide div.tile:last child'.bind{click:function{changeTrainbiome}；}；我试着在每个div.tile上绑定一次。你让我走上了正确的道路：`$.eachbiomes，functionx，biome{$'divterrainGuide'.append；$'divterrainGuide div.tile:last child'.bind{click:function{changeTrainbiome}；}；