Face Code Face Code - 3 months ago 8
jQuery Question

Why can't I click this element?

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

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