按鈕僅適用於重新加載後的第二次點擊

Question

我正在創建一個可以單擊以更改顏色的圖塊。我有一個「清除電路板」按鈕，可以有效清除電路板，使所有瓷磚再次變白，但由於某種原因，按鈕僅在每次重新加載頁面後進行第二次點擊時才起作用。我試過用文檔準備功能包裝我的JavaScript，但這沒有幫助。重新加載後，如何才能讓它在第一次點擊時工作？

HTML：

<h1 class="title">Wacky Painter</h1> 
    <div class="easel"> 
    </div> 
    <form class="clear_board"> 
     <button type="button" id="clear_button" class="btn" onclick="clearBoard()">Clear Board</button> 
    </form> 

CSS：

body { 
    font-family: sans-serif; 
    color: #ff757a; 
} 

.easel { 
    width: 300px; 
    outline: #c8c8c8 5px solid; 
    margin: 0 auto; 
} 

.square { 
    width: 20px; 
    height: 20px; 
    outline: thin solid #c8c8c8; 
    display: inline-block; 
    margin-top:-2px; 
} 

form { 
    margin: 10px auto; 
} 

.title { 
    margin: 0 auto; 
    text-align: center; 
    padding-bottom: 20px; 
} 

的JavaScript（用jQuery）：

window.setUpEasel = function() { 
    var squareString = ""; 
    for(var i=0; i < 195; i++) { 
     squareString+='<div class="square"></div>'; 
    } 
    $('.easel').append(squareString) 
} 

window.giveColor = function() { 
    $('.easel').on('click', '.square', function() { 
     var letters = 'ABCDEF'.split(''); 
     var randomColor = '#'; 
     for (var i = 0; i < 6; i++) { 
      randomColor += letters[Math.round(Math.random() * 15)]; 
     } 
     $($(this)).css('background-color', randomColor); 
    }) 
} 
window.clearBoard = function() { 
    $('#clear_button').on('click', function() { 
     $('.square').css('background-color', 'white'); 
    }) 
} 

    $(function() { 
     setUpEasel(); 
     giveColor(); 
    }); 

這裏有一個工作的jsfiddle：http://jsfiddle.net/MichelleGlauser/yz6mdx1f/1/

Answer 1

你不設置向上你的jQuery單擊事件處理程序的清除按鈕，直到你點擊按鈕（使用按鈕屬性中分配的事件處理程序）。試試這個：

// code above stays the same 

// Adjust so that it is merely responsible for clearing the background 
window.clearBoard = function() { 
    $('.square').css('background-color', 'white'); 
}; 

$(function() { 
    setUpEasel(); 
    giveColor(); 

    // Assign the click handler on DOM-ready 
    $('#clear_button').on('click', function() { 
     clearBoard(); 
    }); 
}); 

最後，從您的按鈕標記刪除內聯onclick屬性。

• DEMO