Question

我从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（板）;重绘电路板，点击功能停止工作。

Here's the link of JSFiddle。

Answer 1

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

$('.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(){ ....

Answer 2

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

由于你将它绑定到div然后用.html（）调用擦除它们，新的div没有绑定到它们的click事件。

改为使用$ .on，并将其绑定到更大的棋盘对象。

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

这将确保点击事件绑定到董事会中任何未来的div。

函数调用后jQuery .click函数不工作

2 个答案: