Why can't I click this element?

Question

If you select this text, a div will appear with colors. I'm trying to track if one of these colors or divs (.boxes) are clicked. But I can't. This is basic JS and it's not working. Why?

$(document).ready(function() {
  $(".boxes").click(function() {
    alert("Hello");
    });
  });

$("#actual_verse").mouseup(function() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    
    if (/\S/.test(text)) {
      new_text = "<div id='color_div'>"+text+"</div>";
      
        
   // Tool Tip
  
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function () {
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together

        //code to set content

        ele.style.display = 'block';
    }
});
window.addEventListener('mousedown', function () {
    ele.style.display = 'none';
});

  // End of Tool Tip
  
  }
  
    
  });

/* Tool Kit */

#tooltip {
    position:absolute;
    display:none;
    border:grey solid 1px;
    background: #373737;
    padding: 5px;
    border-radius: 3px;
}
#cal1{
    position:absolute;
    height:0px;
    width:0px;
    top:100px;
    left:100px;
    overflow:none;
    z-index:-100;
}
#cal2{
    position:absolute;
    height:0px;
    width:0px;
    top:0;
    left:0;
    overflow:none;
    z-index:-100;
}

.boxes {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}

#blue_box {
  background: #AAF6FF;
}

#green_box {
  background: #D6FFAA;
}

#orange_box {
  background: #FFBF98;
}

#purple_box {
  background: #D7D5FC;
}

#red_box {
  background: #FF9B9F;
}

#yellow_box {
  background: #FFF8AA;
}


/* End of Tool Kit */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='actual_verse'> Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  </div>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue' onclick='box()'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>

Answer 1

The problem is this code:

window.addEventListener('mousedown', function() {
  ele.style.display = 'none';
});

The tooltip is being hidden on mousedown, which fires before the click on the "boxes" class. So the click never completes. Move this code into the click function - demo

$(".boxes").click(function() {
  alert("Hello");
  document.getElementById('tooltip').style.display = 'none';
});