I have two classes and a function that works with one of them
$('.div-image').click(function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});
and html something like:
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
Why after first click on the image or (div .div-image) my class div-image is changing to div-image-big. But if we click once more the function $('.div-image').click(function(){...} will execute again. The question is why so? I don't need this behavior. I want that this function work only when class is div-image not div-image-big. Thanks.
The event handler is bound on the element, not the class. Which elements it is bound to is decided based on the class they have at the time that the event is bound, so changing the class later doesn't change which elements have the event handler.
If you want the event handler to react to the class, you should bind a delegate to the a parent element. That way the event bubbles to the parent element, and the delegate handler will check for the class at that moment. Example:
HTML:
<div class="image-container">
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
</div>
Javascript:
$('.image-container').on('click', '.div-image' ,function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});
Related
For example, if I have an HTML snippet like so:
<body>
<div id="1">
<span class="title">I'm a title!</span>
</div>
<div id="2">I'm the first element!</div>
<div id="3">I'm the first element!</div>
<body>
Obviously, if I wanted to get a specific element, say the div with id of 1, I could do something like
document.getElementById("1").addEventListener("mouseover", () => console.log("in div 1!"), false);
and that would output in div 1! whenever I hovered over it. But is there some javascript I can have that apply to every single element in body? To basically write some function like, getElementUserIsHoveringOver()?
I don't think addEventListener works on HTMLCollections, which was my only idea.
mouseover bubbles, so if you attach a listener to the <body>, you can watch for events and log the event.target:
document.body.addEventListener('mouseover', (e) => {
console.log(e.target);
});
<div id="1">
<span class="title">I'm a title!</span>
</div>
<div id="2">I'm the first element!</div>
<div id="3">I'm the second element!</div>
How can I add an event to only the main container and to it's second child elements? In this case, it's id="container" and all class="secondChild"
What I current do add a listener to all elements inside the div
ele = document.getElementById('container');
ele.addEventListener('mousedown',myFunction)
<div class="main" id="container">
<div class="firstChild">
<div class="secondChild">
<div class="inner">
<div class="innerOne">This is Element 1</div>
<div class="innerTwo">This is Element 2</div>
</div>
</div>
<div class="secondChild">
<div class="inner">
<div class="innerOne">This is Element 3</div>
<div class="innerTwo">This is Element 4</div>
</div>
</div>
<div class="secondChild">
<div class="inner">
<div class="innerOne">This is Element 5</div>
<div class="innerTwo">This is Element 6</div>
</div>
</div>
</div>
</div>
You can go with Event Delegation:
From: https://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
Event delegation makes use of two often overlooked features of
JavaScript events: event bubbling and the target element. When an
event is triggered on an element, for example a mouse click on a
button, the same event is also triggered on all of that element’s
ancestors. This process is known as event bubbling; the event bubbles
up from the originating element to the top of the DOM tree. The target
element of any event is the originating element, the button in our
example, and is stored in a property of the event object. Using event
delegation it’s possible to add an event handler to an element, wait
for an event to bubble up from a child element and easily determine
from which element the event originated.
So you attach the listener to #container (you can attach it any ancestor), and the check for the event's target class (or whatever other property you want)
document.getElementById('container').addEventListener('event-name', ev => {
switch(ev.target.className) {
case 'inner':
case 'innerOne':
case 'innerTwo':
// do something?
break;
}
});
(or maybe change the class to secondChild, I actually didn't quite get what element's were you trying to attach handlers to. Also sorry for my english)
I have a portfolio where I list portfolio items.
I have classes so when you click the item, it has an effect.
For some reason, when I click the minus button, it doesn't remove the class 'on'.
Here is the jQuery:
$('.portfolio-item').click(function() {
$(this).addClass('on');
});
$('.minus').click(function() {
$(this).closest('.portfolio-item').removeClass('on');
});
and here is the element set up:
<div class="portfolio-item" style="margin-top: 5px; ">
<div class="overlay">
<h1>LOW POLY ISLANDS</h1>
<h3>LOW POLY</h3>
</div>
<div class="about">
<h1>LOW POLY ISLANDS</h1>
<h3>LOW POLY</h3>
<div class="descrip">
This is a low poly island make in Blender and edited in Photoshop.
</div>
<div class="minus"></div>
<div class="plus"></div>
</div>
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/57909c29180525.55fc4b1875c26.png" width="100%" />
</div>
How do I fix this - I want to be able to remove the class 'on' when I click on 'minus'.
When you click your minus it removes the class on. However, at the same time, as minus is located within portfolio-item, it triggers its click event and applies this class back.
You can use e.stopPropagation() to disable this behaviour.
According to documentation, e.stopPropagation
prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Here is the working JSFiddle demo. It looks awful, but demonstrates the functionality.
you need to use e.stopPropagation()
$('.minus').click(function(e) {
e.stopPropagation();
$(this).closest('.portfolio-item').removeClass('on');
});
DEMO
I have a javascript button that fires an onclick event but i only want it to do that if another div contains a class called "active".
so I have this structure:
<div id="div1">
<div id="someid1" class="design"></div>
<div id="someid2" class="design"></div>
<div id="someid3" class="design"></div>
<div id="someid4" class="design"></div>
</div>
that based on other page activity any can change to class="active"
<div id="someid2" class="design active">
The button is:
<button type="button" id="button1" onclick="dosomething">Click me</button>
but i only want the dosomething to work if the above any of the divs has the active class, and throw an alert if it does not. I am not terribly good with javascript and could use some help.
Hope this is clear. Thanks.
Assuming dosomething is a function, you could just check for the class inside it
function dosomething() {
if ( document.querySelector('#parentid .active') ) {
// do stuff
}
}
querySelector returns null if not found, which is falsy.
document.querySelector documentation
I have the following HTML code, and i am currently trying to add the 'selected' class when a photo is clicked, and to remove the class when it is clicked again.
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="photos/skyemonroe.jpg">
<div class="details">
<div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
<div class="date">12/24/2000</div>
<div class="photographer">Alasdair Dougall</div>
</div>
</div>
//Repetitions of the photo class.....
</div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
I am currently using the following jquery code to bind an event handler to the photo's ancestor so that when more pictures are appended to the page when clicking the more photos button, the jquery code will still work with these newly added pictures.
jQuery
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
The jQuery code above DOES NOT work when i try using the #gallery, NOR does it work when i try using #container.However, the code works when i use $(document) for the event delegation.
I can't seem to figure out why binding the event handlers to the parent elements do not work, but binding it to the document itself makes it work.
Would appreciate any insights into the matter
EDIT: Added the jsfiddle here http://jsfiddle.net/744cX/ ( The code works in the fiddle, but does nothing on my laptop, and i can't seem to figure out why)
You can listen event on '.photo' class
<div class="photo" onclick="$(this).toggleClass('selected');">
I forked your fiddle and as can be seen here:
http://jsfiddle.net/6Qz8C/1/
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
I did:
when the nextpage event is fired, append a new photo.
add the event delegation when the document is ready.
set the delegator to the #gallery