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() {

その時点blueで存在するクラスでのみ div を関連付けます。後で動的に追加された div は、そのイベントに関連付けられません。

委任されたイベント処理を使用する必要があります。最も単純で、最も素朴で、最もパフォーマンスの低いソリューションは、次のようにすることです

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

それだけに注意してください

$(document).on('click',

これは、ページ上のあらゆる場所のすべてのクリック イベントがバブルアップしてチェックされるため、少し悪名高いです。これらのすべての div が常に独自のコンテナにあるように dom が設定されている場合は、そこからイベント処理を設定できますし、設定する必要があります。たとえば、これらすべての div が「foo」というコンテナーにある場合、ハンドラーを次のように設定します。

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