Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen
Related
I have a JS global event handler which looks like this (this is temp code):
$(document).on('click', '.my-class, #box-in-my-class', function(e) {
console.log($(this), 'was clicked!');
if ($(this).is('my-class')) {
$(this).children('.dropdown').toggleClass('active');
}
if ($(this).is('#box-in-my-class')) {
$('#expander').toggleClass('active');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class">
<div class="other-bit"></div>
<div class="dropdown">
<div id="box-in-my-class"></div>
</div>
</div>
<div id="expander"></div>
(the .active class added makes the div bigger - through css).
However, in running this, when I click the #box-in-my-class, I get this in the console:
#box-in-my-class was clicked!
.my-class was clicked!
which toggles the dropdown (closing it).
How do I set it so that when you click the child of an element it does not bubble/propagate/etc. so that I can click the #box-in-my-class w/o running .my-class
Because your event bubbles. In the code you must call e.stopPropagation(); And also you have some missed ')'.
$(document).on('click', '.my-class, #box-in-my-class', function(e) {
e.stopPropagation();
console.log(e.target, 'was clicked!');
if ($(this).is('my-class')) {
$(this).children('.dropdown').toggleClass('active');
}
if ($(this).is('#box-in-my-class')) {
$('#expander').toggleClass('active');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class">
<div class="other-bit"></div>
<div class="dropdown">
<div id="box-in-my-class">Test 1</div>
</div>
</div>
<div id="expander">Test 2</div>
For more see event bubbling
and e.stopPropagation()
try the following
$(document).on('click', '.my-class, #box-in-my-class', function(e) {
if ($(this).is('.my-class') && $(e.target).is(':not(#box-in-my-class')) {//check if the clicked element is not box-in-my-class
console.log($(this), 'was clicked!');
$(this).children('.dropdown').toggleClass('active');
}
if ($(this).is('#box-in-my-class')) {
$('#expander').toggleClass('active');
}
}
demo:http://jsfiddle.net/0yvuzm0c/
I think you shouldn't use 2 if class when you only need one response.
If I were you, I would write my JS function like this:
if ($(this).is('#box-in-my-class') {
$('#expander').toggleClass('active');
return;
}else if ($(this).is('my-class') {
$(this).children('.dropdown').toggleClass('active');
return;
}
I will check this $('#box-in-my-class') first due to the reason that $('#box-in-my-class') is the child of $(.'my-class').
In this case, if it detected $('#box-in-my-class') is clicked, it will stop the loop. instead of checking $(.'my-class') too.
You may study http://www.w3schools.com/js/js_if_else.asp to be more familiar with if, else, else if loop.
I have an html like this
<div class='click' id='1'>
one
<div class='click' id='2'>
two
<div class='click' id='3'>
three
<div class='click' id='4'>
four
<div class='click' id='5'>
five
</div>
</div>
</div>
</div>
if i have and click event on class click ,there is any way to return the id of which i click
such as
$('.click').click(function(){
alert('id whitch i click')
});
Becase if i click on three i allway get the id of one and two three.
Sure, just do this:
$('.click').click(function(e){ //e=event
alert($(this).attr("id")); // alert clicked element's id
e.stopPropagation(); // stop event propagation so it doesnt propagate to click 1 and click 2
})
Update: As mentioned by Felix Kling, you can access de DOM directly and use:
alert(this.id);
Demo: http://jsfiddle.net/tzJUN/ using this.id http://jsfiddle.net/c65x9/
If you keen : jQuery attr vs prop?
Stop propogation will stop the click event the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
API:
.stoppropagation - http://api.jquery.com/event.stoppropagation/
Code
$(document).ready(function () {
$('.click').click(function (event) {
event.stopPropagation();
alert($(this).prop("id")); //<< --- or this.id
});
});
$('.click').click(function(e){
$(this).attr("id");
alert($(this).attr("id"));//here you can see your clicked id
})
Yes. its simple
$(document).ready(function(){
$('.click').click(function(){
var ID=$(this).attr('id');
alert(ID);
//This ID varible will return ID of the Div Clicked
});
});
Why the div#1 dosen't change text. What i'm doing wrong?
<div id="1" class="a" style="width: 300px;height: 300px; background-color: #003366"></div>
<div id="2" class="b" style="width: 300px;height: 300px; background-color: #003366"></div>
<script>
$(document).ready(function(){
$(".b").click(function(){
$(this).text("hello");
});
$(".a").mouseover(function(){
$(this).addClass("b");
});
});
</script>
Event handlers are added to the elements that match the selector at that time, changing the selector later does not magically make the event handler work.
You could use delegated event handlers for this
$(document).ready(function(){
$(document).on("click", ".b", function(){
$(this).text("hello");
});
$(".a").mouseover(function(){
$(this).addClass("b");
});
});
But why are you doing this, it seems like a strange pattern to activate a click handler only after the same element has been hovered, as you couldn't possibly click it unless the mouse is over it ?
Try this
$("body")
.on('click', '.a', function (){
$(this).addClass("b");
})
.on('click', '.b', function (){
$(this).text("hello");
})
How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);
EDIT--- I realized that the problem here was that the click handler that was bound to the element had to be unbound before I could bind another click handler handler.
I want to allow the user to select/unselect items by click on the element in question. The elements start in an "options" box and if clicked, move to a "selected box". If they are then clicked in the selected box, the elements move back to the original options box.
Can't figure out why delegate() and live() are not working here. I assume this has to do with prependTo() or appendTo().
$('#amen_options .options p').click(function(e){
$(this).appendTo('#amen_selected .options');
e.stopPropagation();
e.preventDefault();
});
/*
$("body").delegate('#amen_selected p', 'click', function(e){
#(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
*/
$('div#amen_selected div.options p').live('click',function(e){
$(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
Here's the markup:
<div>
<div id="amen_options">
<h3>Click to Select</h3>
<div class="options">
<p data-option="">One</p>
<p data-option="">Two</p>
<p data-option="">Etc...</p>
</div>
</div>
<div id="amen_selected">
<h3>Selected</h3>
<div class="options">
</div>
</div>
The first click works (sending p elements from options to selected box). Once in selected, though, no event handlers are binding. The firebug console isn't showing an error. Normally, I'd assume that this is a markup problem, but I've checked it repeatedly.
Thanks!
It looks like delegate() works good.
http://jsfiddle.net/fLXgU/1/
$('body').delegate('#amen_options .options p', 'click', function(e) {
$(this).appendTo('#amen_selected .options');
return false;
});
$('body').delegate('#amen_selected .options p', 'click', function(e) {
$(this).appendTo('#amen_options .options');
return false;
});