Javascript jQuery不侦听对动态生成的元素的单击

所以在我几个月学习JavaScript的过程中，我终于坐下来建造了“扫雷舰”。作为奖励，它确实有效！呃,嗯。。第一次

问题是，如果我清除我的棋盘，然后再次动态生成新的游戏棋盘，那么我的jQuery单击侦听器就不再工作了。游戏在第一次加载文档时工作，但单击后不会注册

全小提琴：

与这一问题有关的部分：

index.html

问题:

我已经浏览了所有相关的问题，我可以在这里和其他地方找到。根据这个建议，我已经测试了下面的代码，但是在重新生成表之后，这也不起作用

$(document).ready(function(){
....
//right click check
    $(".left").on('mousedown','td',function(e){

---

当您重新创建板时，您将销毁所有侦听器

把听者放在绘图板的末端，效果很好

您必须使用文档作为选择器

像这样：

$(document).on('mousedown','.left td',function(e){
  if( e.button == 2 ) {
      if($(this).hasClass('blank')){
          $(this).removeClass('blank');
          $(this).addClass('flag');
          $(this).text('');
          $(this).append('<img src="http://www.chezpoor.com/minesweeper/images/bombflagged.gif">'); //add flag if it's blank
      } else if($(this).hasClass('flag')) {
          $(this).removeClass('flag');
          $(this).addClass('blank');
          $(this).text('');
          $(this).append('<img src="http://www.chezpoor.com/minesweeper/images/blank.gif">'); //back to blank
      }
  }
});

//left click check
 $(document).on('mousedown','.left td',function(e){
      if( e.button === 0 ) {
          checkCell($(this).attr('id'));
      }

这样，它也将与生成的元素一起工作

注:

关于代码和性能优化，请参阅下面的@cyk评论 关于活动表现

---

我想location.reload不是一个选项吧-可能是在清理板时，您是否也正在移除“.left”容器？在这种情况下，必须在“.left”容器上再次绑定“mousedown”事件。如果要删除“.left”节点，则会丢失绑定。绑定到总是存在的东西上。谁否决了汤姆-为什么？他提出了一个有效的问题，很好地格式化了它，并加入了示例，甚至是一个JSFIDLE。除了不提问，默默忍受之外，他还能做什么呢？谢谢@Mathletics，这是亚杰指出的解决方案。我甚至不认为我没有将它绑定到正在被破坏/重建的东西上，是的，是的，1000000次是的。谢谢，就是这个。三分钟后你就把我盯着看了一个多小时的东西修好了。非常感谢。在5分钟内允许Meantime mate时接受。没有问题只是澄清一下，您的事件需要附加到一个不会被删除的公共父元素。例如，按照Yaje的建议编写文档，或者您甚至可以将事件附加到.gameBoard。我最近学会了小心不要滥用附加到文档的功能，因为当您有很多事件时，性能会降低。最好附加到更靠近要绑定的元素的元素上唯一的要求是需要附加到DOM中已经存在且不会被删除的元素上。在本例中，$'.gameboard'。在。。。会有用的。啊，这很有道理。我在破坏。左边，所以听众当然会离开。我可以用.gameBoard代替@cyk建议的文档。谢谢大家，这是伟大的学习

    $(document).ready(function(){
    ....
    //right click check
        $(".left").find('td').on('mousedown',function(e){
          if( e.button == 2 ) {
             alert('**now this doesn't work!**');
          } 
        }

$(document).ready(function(){
....
//right click check
    $(".left").on('mousedown','td',function(e){

function draw_board(x,y){
    ...
    createListeners();
}

$(document).ready(function(){
    ..
    // init functions
    draw_board(numRows,numCols); 
});

function createListeners() {
   // add listeners here
}

$(document).on('mousedown','.left td',function(e){
  if( e.button == 2 ) {
      if($(this).hasClass('blank')){
          $(this).removeClass('blank');
          $(this).addClass('flag');
          $(this).text('');
          $(this).append('<img src="http://www.chezpoor.com/minesweeper/images/bombflagged.gif">'); //add flag if it's blank
      } else if($(this).hasClass('flag')) {
          $(this).removeClass('flag');
          $(this).addClass('blank');
          $(this).text('');
          $(this).append('<img src="http://www.chezpoor.com/minesweeper/images/blank.gif">'); //back to blank
      }
  }
});

//left click check
 $(document).on('mousedown','.left td',function(e){
      if( e.button === 0 ) {
          checkCell($(this).attr('id'));
      }