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';
});