0

我从 3 天开始就遇到了这个问题，所以问题是当我移动一块时，它会刷新板，以便 ai 可以移动，在板中刷新后，单击功能停止工作。

    function drawBoard(board) {
     var str = '';

       for( var x = 0 ; x < 8 ; x++ ){
           for( var y = 0 ; y < 9 ; y++ ){
              str += '<div id="mydiv" class="cell" data-square="'+ x +","+ y +'">' +
              '<div class="'+checkPiece(board[x][y]) +' '+ getPieceName(board[x][y]) + '" data-value="' + board[x][y] + '"></div>' +
              '</div>';
           }

       }
    $('#board').html(str);
    }

在我再次调用 drawBoard(board); 重绘板点击功能停止工作。

这是 JSFiddle 的链接。

4

2 回答 2

2

问题在于您如何设置事件处理：

$('.blue').each(function (index, div) {
    $(div).click(function() {

只会将 div 与当时存在的类blue连接起来。稍后动态添加的任何 div 都不会连接到该事件。

您需要使用委托事件处理。最简单、最天真、性能最低的解决方案是

$(document).on('click', 'div.blue', function(){ ...

请注意

$(document).on('click',

有点臭名昭著，因为它会导致页面上任何位置的所有点击事件冒泡并被检查。如果您的 dom 设置为所有这些 div 将始终位于它们自己的容器中，那么您可以并且应该从那里设置事件处理。例如，如果所有这些 div 都在一个名为 'foo' 的容器中，你可以像这样设置你的处理程序：

$('#foo').on('click', 'div.blue', function(){ ....
于 2013-10-16T04:41:31.013 回答
0

$.click 函数仅适用于首次调用时存在的对象。

由于您将其绑定到 div，然后使用 .html() 调用将其擦除，因此新的 div 没有绑定到它们的单击事件。

改用 $.on，并将其绑定到较大的板对象。

$("#board").on("click", "div", function () {
    //your click code here
});

这将确保点击事件绑定到放置在板上的任何未来 div。

于 2013-10-16T04:44:32.323 回答