javascript - jQuery - Have to press button twice or more to make the function stick -

i attempting make "etch-a-sketch" style block of divs. when "erase()" or "draw()" functions called via button press, work few seconds or increase or decrease opacity .1 until double press button. trying make can pressed once , continue increase/decrease opacity on hovered elements continually until other function stopped. missing here?

function erase(){     $('.erase').toggleclass('draw').toggleclass('erase');     $('.box').hover(lighten); }  function draw(){     $('.erase').toggleclass('erase').toggleclass('draw');     $('.box').hover(darken); }  function darken(){     var currentdarkness = +$(this).css('opacity');     if (currentdarkness <= 1) currentdarkness += .10;     $(this).css({"opacity": currentdarkness}); }  function lighten(){     var currentdarkness = +$(this).css('opacity');     if (currentdarkness >= 0) currentdarkness -= .10;     $(this).css({"opacity": currentdarkness}); } $('.erase').off('click').on('click', erase); $('.draw').off('click').on('click', draw); 

full code - https://jsfiddle.net/weslex/ftwaw27e/

the problem calling

$('.box').hover(lighten); 

in erase() doesn't remove old hover handler. when hover on box, calls both darken , lighten. see how remove $.hover event added jquery?

$(document).ready(function() {    creategrid(16);    $(".box").hover(darken);    });    function erase() {    $('.erase').toggleclass('draw').toggleclass('erase');    $('.box').off("mouseenter mouseleave").hover(lighten);  }    function draw() {    $('.erase').toggleclass('erase').toggleclass('draw');    $('.box').off("mouseenter mouseleave").hover(darken);  }    function darken() {    var currentdarkness = +$(this).css('opacity');    if (currentdarkness < 1) currentdarkness += .10;    $(this).css({      "opacity": currentdarkness    });  }    function lighten() {    var currentdarkness = +$(this).css('opacity');    if (currentdarkness >= 0) currentdarkness -= .10;    $(this).css({      "opacity": currentdarkness    });  }    function creategrid(sqnum) {    var totalsquares = sqnum * sqnum;    $('#canvas').empty();    (var = 0; < totalsquares; i++) {      $("#canvas").append("<div class='box'></div>");    }  }    function reset() {    $('#canvas').empty();    creategrid(16);    $(".box").hover(darken);  }    function newgrid() {    var sqnum = prompt("how many boxes want on each side?");    if (sqnum < 1 || sqnum == null || sqnum > 150) {      var sqnum = prompt("that number out of range. how many boxes want on each side?");    } else {      creategrid(sqnum);      var totalsquares = sqnum * sqnum;      var boxsize = 800 / sqnum;      $(".box").css({        "width": boxsize + 'px'      });      $(".box").css({        "height": boxsize + 'px'      });      $(".box").hover(darken);    }  }    $('.erase').off('click').on('click', erase);  $('.draw').off('click').on('click', draw);

h1 {    text-align: center;  }  #canvas {    background-color: #fff;    border: 1px solid black;    ) height: 800px;    line-height: 0;    margin: 30px auto;    width: 800px;  }  .controls {    display: block;    margin: 10px auto;    width: 15%;  }  .controls > button {    background-color: #dedede;    border-radius: 5px;    display: inline-block;    margin: 2px auto;  }  .lighten {    background-color: #9999ff;  }  .box {    background-color: black;    display: inline-block;    height: 50px;    margin: 0;    opacity: 0;    padding: 0;    width: 50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id='canvas'>    </div>    <div class='controls'>    <button onclick='reset()'>reset</button>    <button onclick='newgrid()'>select grid</button>    <button class='erase'>erase</button>'    <button class='draw'>draw</button>'  </div>