DIV losing focus when clicking on elements inside it - javascript

Why does the DIV lose focus when i click on elements inside it?
I have an JS that hides the DIV when it loses focus. But that should not happen when clicking on elements inside the DIV.
It needs to be done with .on because there is some ajax loading going on.
$(document).on('focusout', '#geomodal', function(e) {
console.log('.focusout');
});
<div id="geomodal" tabindex="-1">
<input value="109" name="districts[]" type="checkbox">
<label>Bla</label>
<br>
<input value="152673" name="districts[]" type="checkbox">
<label>Blabla</label>
<br>
</div>
http://jsfiddle.net/2g41su81/2/
jQuery Documentation:
The focusout event is sent to an element when it, or any element
inside of it, loses focus.

Only one element has focus at a time - if an input has focus, your div doesn't. After losing focus, check if the newly-focused element is your div or a child, and don't hide it in that case.
$(document).on('focusout', '#geomodal', function (e) {
setTimeout(function(){
var focus=$(document.activeElement);
if (focus.is("#geomodal") || $('#geomodal').has(focus).length) {
console.log("still focused");
} else {
console.log(".focusout");
}
},0);
});
The setTimeout is necessary to allow the new element to gain focus before doing the check.
http://jsfiddle.net/2g41su81/5/

you can also use e.relatedTarget to get the element which caused the focusout to be triggered and do handling according to that!

check this example.
the focusout event is not execute while click on inner elements
Check the "tabindex" attribute, is the trick
Html Code
<div id="mydiv" tabindex="100">
<div class="anotherdiv">
<input type="checkbox" name="" value=1>
</div>
<div class="anotherdiv"> child content
<input type="checkbox" name="" value=1>
</div>
</div>
http://jsfiddle.net/tierrarara/kPbfL/425/
JS Code
$("#mydiv").focusin(function() {
$("#mydiv").css("background","red");
});
$("#mydiv").focusout(function() {
$("#mydiv").css("background","white");
});
CSS Code
#mydiv{
width : 50px;
height:auto;
border : 1px solid red;
}
.anotherdiv{
width : 50px;
height:50px;
border : 1px solid blue;
}

Related

Why does jQuery(document).on('click... not register a click on specific divs?

On click of anywhere on the document, I'd like to make sure I close my menus. I am running a console log on document click, and do not see it populate when clicking on specific divs.
jQuery(document).on('click', function(e){
console.log('- - - - clicking the document - - - -');
});
I am expecting to see this console log if I click anywhere on the page. Any help is much appreciated. I feel as though I am missing something here. Why would the console log not populate whenever I click on a specific div, but populates everywhere else.
<div id="info-201972681835185" class="panelInfoBox compareViewInfo" style="bottom: 30px; right: 0px;" previewid="201972681835185" processid="201972681835185">
<form id="photoInfoForm-201972681835185">
<input name="externalApprovalStateId" id="externalApprovalStateId" value="1000" type="hidden" class="">
<ul>
<li>
<input type="text" name="name" id="name" title="Label" value="2" class="processEdit title" placeholder="Label">
</li>
</ul>
</form>
</div>
The divs where you don't see it happen either have their own click handler that stops event propagation, or are within another element that has such a click handler. For a click to reach document, it has to be allowed to propagate.
Here's an example:
jQuery(document).on('click', function(e){
console.log('- - - - clicking the document - - - -');
});
jQuery(".div2").on("click", function(e) {
e.stopPropagation();
});
jQuery("section").on("click", function() {
// This does both stopPropagation and preventDefault
return false;
});
.div1, .div2, .section1 div {
border: 1px solid black;
margin: 2px;
padding 2px;
}
<div class="div1">
This is div #1, clicks will register
</div>
<div class="div2">
This is div #2, clicks won't register because it has a click handler that stops propagation
</div>
<section class="section1">
<div>
This is div #3, clicks won't register because it's inside an element that has a click handler that stops propagation
</div>
</section>
<div id="info-201972681835185" class="panelInfoBox compareViewInfo" style="bottom: 30px; right: 0px;" previewid="201972681835185" processid="201972681835185">
<form id="photoInfoForm-201972681835185">
<input name="externalApprovalStateId" id="externalApprovalStateId" value="1000" type="hidden" class="">
<ul>
<li>
<input type="text" name="name" id="name" title="Label" value="2" class="processEdit title" placeholder="Label">
</li>
</ul>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
In a comment you said:
What's interesting is I am seeing that the div that doesn't register the click is dynamically added via js at a later time. So I tried to run the jQuery(document) click again afterwards, but it still didn't register. The div is simply an info panel that is dynamically added via js and slides out when a button is clicked.
It doesn't matter when the div was added, it still follows the rule above. For instance, here's the earlier example but with your div added after 800ms:
jQuery(document).on('click', function(e){
console.log('- - - - clicking the document - - - -');
});
jQuery(".div2").on("click", function(e) {
e.stopPropagation();
});
jQuery("section").on("click", function() {
// This does both stopPropagation and preventDefault
return false;
});
setTimeout(function() {
$(`<div id="info-201972681835185" class="panelInfoBox compareViewInfo" style="bottom: 30px; right: 0px;" previewid="201972681835185" processid="201972681835185">
<form id="photoInfoForm-201972681835185">
<input name="externalApprovalStateId" id="externalApprovalStateId" value="1000" type="hidden" class="">
<ul>
<li>
<input type="text" name="name" id="name" title="Label" value="2" class="processEdit title" placeholder="Label">
</li>
</ul>
</form>
</div>`).appendTo(document.body);
}, 800);
.div1, .div2, .section1 div, .div4 {
border: 1px solid black;
margin: 2px;
padding 2px;
}
<div class="div1">
This is div #1, clicks will register
</div>
<div class="div2">
This is div #2, clicks won't register because it has a click handler that stops propagation
</div>
<section class="section1">
<div>
This is div #3, clicks won't register because it's inside an element that has a click handler that stops propagation
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Clicking that fourth div still triggers the handler. This is the central aspect of delegated event handling.

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

Moving button doesn't receive click event

I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/

How to attach click event to a css styled checkbox

Having a hard time attaching a click event. I just want to do a few calculations when user checks a checkbox.
When a checkbox is checked the span's class becomes 'checked' & 'unchecked' when unchecked.
The input checkbox is not displayed & also its attribute 'checked' is not applied, when checked, making it even more difficult.
HTML:
<div class="checkboxBtn" style="border:1px solid blue;">
<span class="cheked" style="width:20px;height:20px;border:1px solid red;"
onclick="CheckSelected();">
</span>
<input id="23" type="checkbox" style="border:1px solid green;"></input>
<label>Compare Now</label>
</div>
None of these worked:
JS:
$(document).ready(function () {
$(".cheked").click(function () {
alert(".cheked");
})
$(".uncheked").click(function () {
alert(".uncheked");
})
})
function CheckSelected() {
alert("");
return false;
}
Is this not working because, there might be already a click event to show the tick image.
If there is any already, how can I do my task, without disturbing the existing functionality.
Try this
- Apply class to Checkbox and bind change event.
<div class="checkboxBtn" style="border:1px solid blue;">
<span class="cheked" style="width:20px;height:20px;border:1px solid red;"
onclick="CheckSelected();">
</span>
<input id="23" class="chkBx" type="checkbox" style="border:1px solid green;"></input>
<label>Compare Now</label>
</div>
$(document).ready(function() {
$('.chkBx').change(function() {
if($(this).is(":checked")) {
$(this).closest('span').removeAttr('class');
$(this).closest('span').addClass('checked');
}
else{
$(this).closest('span').removeAttr('class');
$(this).closest('span').addClass('unchecked');
}
});
});
This is because the '.click' handler will attach event to all of the matched element specified by selector at the time of invocation but not to the future element. i.e if an element with class name 'cheked' added later by JavaScript, the click handler will not be attached to that obviously.
Therefore you should add a dummy static class to attach handler. Note that event attached to the checkedbox is fired after changing the checkbox status.
Here is the updated working code.
<div class="checkboxBtn">
<span id="23_span" class="unchecked"></span>
<input type="checkbox" id="23"></input>
<label for="23">Compare Now</label>
</div>
<script>
$(document).ready(function () {
$("#23").click(function () {
CheckSelected();
})
})
function CheckSelected() {
if(document.getElementById('23').checked) {
$("#23_span").removeClass("unchecked").addClass("checked");
alert("checked");
}
else {
$("#23_span").removeClass("checked").addClass("unchecked");
alert("unchecked");
}
}
</script>
Now you can provide CSS to your span element according to the requirement.

onblur() is not working while onclick() is working fine

I need to make the notification list appear on the click which is working fine. But onblur() is not working at all.
Here is the fiddle: http://jsfiddle.net/eX2zQ/
Code:
html:-
<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">
<div>
<ul class="dropdown" id="notification" >
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>See_All</li>
</ul>
</div>
</div>
css:-
.one{
overflow: visible;
width: 21px;
height: 21px;
background-color:black;
}
js:-
var show=0;
function hidetwo(){
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
function remove_the_notification(){
alert('hide one');
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
You have onLoad selected in the JSFiddle options. That means that your functions are hoisted after everything on the page is loaded, and so their references aren't available at the time that the handlers are attached. Also, AFAIK, without contenteditable your can't 'blur' a <div> - this event is usually for form elements like inputs. Perhaps you meant onmouseleave?
<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();">
JSFiddle
Use onmouseout for this. This will trigger when the mouse is going outside the div.
W3Schools onmouseout
onBlur() event will work with input element like text,file . it will not working on div,so please try onmouseLeave(),onmouseout()
<div class="one" onclick="hidetwo();" onmouseout="remove_the_notification();">
To make onblur event worked on DIV element you need to add tabindex attribute for DIV. For example:
<div class="one" onclick="hidetwo();"
tabindex="0" onblur="remove_the_notification();">
...
</div>

Categories

Resources