jQuery的空（）方法使我的<element>無法點擊？

我正在嘗試創建一個使用HTML/CSS/Javascript/jquery的井字棋遊戲。我有一個清除網格內容的重置按鈕。按下重置按鈕後，網格的內容被清除，但我無法再次點擊我的網格來選擇我的位置。我的重置按鈕有以下代碼：jQuery的空（）方法使我的<element>無法點擊？

$('#reset').click(function(){ 
    $('.cells').empty(); 
    //board_make(); 
});

我的網格/板創建使用下面的代碼。基本上它爲網格中的每個單元格創建元素，每個單元格都有一個「單元格」類。

function board_make(){ 
    for (var i = 0; i < 3; i ++){ 
    array[i] = new Array(3); 
    for (var j = 0; j < 3; j ++){ 
     array[i][j] = "A" ; 
     if(j == 2){ 
     $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div></br></br></br>"); 
     } 
     else{ 
     $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>"); 
     } 
    } 
    } 
}

最後，這是每當網格中的一個單元被點擊了被執行的代碼：

$('.cells').click(function(){ 
    if ($(this).text() != symbol){ 
     var a = parseInt($(this).text()[0],10); 
     var b = parseInt($(this).text()[1],10); 
     array[a][b] = symbol; 
     $(this).html("<p class='shown'>"+symbol+"</p>"); 
    } 
    else{ 
     alert("Spot taken. Pick another spot."); 
    } 
    if ((winner_found === false) && (hor_match() || ver_match() || diag_match())){ 
     alert("Match found!"); 
     winner_found = true; 
    } 
});

這裏與代碼一起鏈接到工作正在進行中：http://jsbin.com/inazog/6/edit。

來源

2012-12-26 dexx1220

可能重複它？]（http://stackoverflow.com/questions/12230057/event-delegation-in-jquery-how-to-do-it） – Shmiddty

編輯 —下面是什麼不是問題。問題似乎是在清除單元格時，您正在清除隱藏在其中的索引值。也就是說，您正在移除隱藏的<p>標籤。

而是在那裏堅持索引的使用jQuery的.data()機制：

var cell = ${'<div/>', {'class': 'cells'}); 
cell.data('x-index', i).data('y-index', j); 
$('.board').append(cell);

然後你就可以得到電池的索引值，而不必保留隱藏要素。

沒有問題，但不是一個真正的壞主意：

而不是

$('.cells').click(function(){

成立了事件處理程序是這樣的：

$('body').on('click', '.cells', function() { ...

當你清空容器，所有的元素都會丟失，並隨着它們走他是事件處理程序。通過在不包含的外部元素上設置處理程序，處理程序在網格重建後保持有效。

如果你願意，你也可以把事件處理程序的「.board」容器：

$('.board').on('click', '.cells', function() { ...

來源

2012-12-26 19:59:13 Pointy

事件處理程序單擊打開.cells並且它們不會被清除時調用$ （'.cells'）。empty（） –

@ParvSharma hmmm ....讓我查看jsbin – Pointy

的問題是，您使用的是隱藏的文本指示單元格的行/列，但是在清空單元格時刪除隱藏文字。

"<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>" 

var a = parseInt($(this).text()[0],10); // $(this).text() is "" after you clear the cells. 
var b = parseInt($(this).text()[1],10);

在這裏看到你的代碼的固定版本：http://jsbin.com/inazog/13/edit

來源

2012-12-26 20:09:05 Shmiddty

感謝大家的解釋！感謝Shmiddty提供的固定版本。祝大家節日快樂！ – dexx1220

變化： $('.cells').click(function() 到 $('.board').on('click', '.cells', function() ，這樣的單擊事件是在重新渲染活着。
變化$('.cells').empty();到$('.board').empty();和重新呈現板：

board_make（）;

JSBin

來源

2012-12-26 20:16:02 JimmyRare

有很多這裏問題或潛在問題。

首先，不要打擾事先定義你的陣列的尺寸，並使用替代new Array數組文本。 JavaScript大多忽略了這一點，它可能會導致奇怪的錯誤。
接下來，使用DOM！在所有方面編寫HTML只是要求事件處理程序丟失。
使用數據而不是解析節點的文本內容。或者只是使用你的數組。
重置後，您實際上並未清除陣列。這可能是因爲board_make()再次增加了一切;我不知道。實際上刪除整個事情會更好，並且讓board_make()再次完成。也可以在那裏添加事件處理程序，並保持所有內容。
</br>是無效的HTML。

因此，考慮到這一點，我changed some things現在是不是真的一樣... :(不過你的想法，對吧？

jQuery中[事件委託，該怎麼辦

來源

2012-12-26 20:25:04 Ryan

感謝您的聯繫。在編程方面還是相當新穎的，所以createBoa的一些部分你寫的rd（）函數對我來說是陌生的，但我一定會花時間學習它。 – dexx1220

jQuery的空（）方法使我的<element>無法點擊？

回答

相關問題