Почему я не могу щелкнуть этот элемент?

Question

Если вы выберете этот текст, появится div с цветами. Я пытаюсь отслеживать, если щелкнуть один из этих цветов или divs (.boxes). Но я не могу. Это базовый JS, и он не работает. Почему?

$(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

Проблема этот код:

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

В подсказке будет прячась на MouseDown, который срабатывает перед щелчком на классе "коробки". Таким образом, клик никогда не завершается. Переместите этот код в функцию щелчка - demo

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