I have approximately such structure:
<div class='container'>
<div class='element' data-id='1'></div>
<div class='element' data-id='2'></div>
<div class='element' data-id='2'></div>
</div>
Where .elements' are rendered dynamically.
So I wrote handler for these elements:
jQuery('.container').on('click', '.element', function () { //code })
But I need to do something with element, which was clicked.
How could I get clicked element?
The clicked element will be this in your event handler function.
jQuery('.container').on('click', '.element', function () {
// use "this" or "jQuery(this)", depending on your needs
})
Note that this will point to a DOM element, in your case a <div>.
You have to do something with the target of the event.
Something like :
jQuery('.container').on('click', '.element', function (event) {
var clickedelement = $(event.target);
//code
})
HTML:
<div class='container'>
<div class='element' data-id='1'/>
<div class='element' data-id='2'/>
<div class='element' data-id='2'/>
</div>
Javascript:
$(function () {
$('.container').on('click', '.element', function () {
$clickedElement = $(this);
$data-id = $clickedElement.attr('data-id');
});
});
Related
I've got the following markup on the page
<div id="box">
<div id="box_child_one"></div>
<div id="box_child_two"></div>
<div id="box_child_three"></div>
</div>
I need to trigger the onmousedown event on all elements inside the #box div so i've got this javascript code:
var element = "#box";
document.querySelector(element).onmousedown = function() {
alert("triggered");
};
However, I do not want onmousedown being triggered on the #box_child_three element.
How can I achieve this?
Thank you.
Check event.target to find out which element was actually clicked on.
var element = "#box";
document.querySelector(element).onmousedown = function(e) {
if (e.target.id !== "box_child_three") {
alert("triggered");
}
};
<div id="box">
<div id="box_child_one">one</div>
<div id="box_child_two">two</div>
<div id="box_child_three">three</div>
</div>
You need to stopPropagation for the event when element three is clicked so that it doesn't bubble up to the parent (box) element.
document.getElementById('box').addEventListener('click', () =>
alert('triggered')
);
document.getElementById('box_child_three').addEventListener('click', e =>
e.stopPropagation()
);
<div id="box">
<div id="box_child_one">one</div>
<div id="box_child_two">two</div>
<div id="box_child_three">three</div>
</div>
<div id="box">
<div id="box_child_one" trigger></div>
<div id="box_child_two" trigger></div>
<div id="box_child_three"></div>
</div>
<script>
document.querySelector('#box').onclick = function(e){
if(e.target.hasAttribute('trigger')){
alert('event fired')
}
}
</script>
I'd go for this. As you are now no longer relying on an id to carry this out making it more re-usable
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
Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});
Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {
Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});
So I got :
var current = $('.article.active');
$('div').on("click", function() {
if(current.next('.article').hasClass('hide')){
$(current).addClass('hide');
$(current).next('.article').removeClass('hide');
};
});
And Html:
<body>
<div class="app">
<div id="article0" class="article active"></div>
<div id="article1" class="article hide"></div>
<div id="article2" class="article hide"></div>
</div>
So when I click on the div the code works, but only once. I want to be executed multiple times for every div.
JSFIDDLE: http://jsfiddle.net/9xrpuru9/
You need to find the active element in the click handler, also the active class also have to be changed
$('div.app').on("click", function () {
var current = $('.article.active');
$(current).addClass('hide').removeClass('active');
if (current.next('.article').length) {
$(current).next('.article').removeClass('hide').addClass('active');
} else {
$('.article:first').removeClass('hide').addClass('active');
}
});
Demo: Fiddle
You are not setting the active class to the next article div.
You can try the following code.
$('.article').on("click", function () {
if ($(this).next('.article').hasClass('hide')) {
$(this).addClass('hide').removeClass('active');
$(this).next('.article').removeClass('hide').addClass('active');
};
});
This works fine:
$('.classname').click(function() {
alert('');
});
<div class="classname">Click me!</div>
But this doesn't:
$('.classname').click(function() {
alert('');
});
<div class="classname">Click me!</div>
<div class="classname">Click me!</div>
How can i fix this? Thanks for your help!
(The script in tags, and the .click is in a document ready function)
Just try this:
$('PARENTNODE').on('click', '.classname', function() {
alert('');
});
<div class="classname">Click me!</div>
<div class="classname">Click me!</div>
The elements are added after your click handler is attached. By using .on() you enable it for future elements too.
Replace PARENTNODE with the parent you want to delegate to (eg. body)
You're trying to target elements that don't exist at the moment where .click is called.
You could wrap the whole jquery code between $(function() { your code here }); or move the javascript after the two <div>.
I'm assuming that all the divs but the first one are added dynamically.
Use an event delegated approach:
$(function(){
$(document).on('click', '.classname', function() {
alert('');
});
}),
Try this
$(document).ready(function(){
$(document).on('click', '.classname', function() {
alert('');
});
});
Refer http://api.jquery.com/on/