Question

因此，在我长达几个月的学习JavaScript的过程中，我终于坐下来建造了扫雷。作为奖励，它确实有效！（呃，第一次......）。

问题在于，如果我清除我的电路板然后再次动态生成新的游戏板，我的jQuery点击监听器都不会再工作了。该游戏适用于第一个文档加载，但点击后不会注册。

Full jfiddle： http://jsfiddle.net/3w5zm64y/

与此问题相关的部分：

的index.html

<table class="gameBoard"></table> //the game board is dynamically generated inside of this table

JS代码

    $(document).ready(function(){
    ....
    //right click check
        $(".left").find('td').on('mousedown',function(e){
          if( e.button == 2 ) {
             alert('this works only on the first page load');
          } 
        }

    $('.gameBoard').text(''); //this is where I clear out everything within the gameBoard table
    draw_board(numRows,numCols);  //this method puts everything back into the gameBoard table

问题：

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

我已经查看过我在SO和其他地方可以找到的所有相关问题。根据这个建议，我已经测试了以下代码，但在重新生成表格后也没有用

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

Answer 1

您必须使用document作为选择器

像这样：

$(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'));
      }

这样它也可以用于生成的元素

DEMO

注意：

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

Answer 2

重新创建棋盘时，会摧毁所有听众。

将听众放在绘图板的末尾，它可以正常工作。

http://jsfiddle.net/3w5zm64y/4/

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

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

function createListeners() {
   // add listeners here
}

jQuery没有监听动态生成的元素的点击

2 个答案: