Кнопка работает только после второго щелчка после перезагрузки

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 click на кнопке очистки до тех пор, пока вы не нажмете на кнопку (используя обработчик событий, назначенный атрибутами кнопки). Попробуйте вместо этого:

// 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