I have dynamically created divs..
<div class="container"></div>
Each div has an input element within it..
<div class="container">
<input type="button" class="container_button" value="toggle" />
</div>
My goal is to minimize only the container div of the button clicked..
$('.container_button').onclick(function() {
$('.container').css('height','20px');
});
How can I achieve this when multiple divs of the same class exist?
jQuery object doesn't have onclick method, you can use on method instead, as you are generating the element dynamically you should also delegate the event.
$(document).on('click', '.container_button', function() {
$(this).parent('.container').css('height','20px');
// ^--- clicked element
});
You need to find .container relative to the DOM element that was clicked.
$('.container_button').click(function () {
$(this).closest('.container').css('height', '20px');
});
Related
I have a span .icon-trash in a div parent in another div parent I want when I click it to remove .item-append and I have many of the .item-append
<div class="item-append">
<div class="cont1">
<img src="">
</div>
<div class="cont2">
<span class="qua">
<span class="icon-trash"></span>
</span>
</div>
</div>
I tried jQuery but a don't know what should I put in the selector
$('.icon-trash').on('click', function () {
$(selector).remove();
});
To remove the .item-append element when the .icon-trash element is clicked, you can use the following code:
$('.icon-trash').on('click', function() {
$(this).closest('.item-append').remove();
});
In the code above, this refers to the .icon-trash element that was clicked. The closest() method is used to find the nearest ancestor element that matches the given selector (in this case, .item-append).
Alternatively, you could also use the following code to achieve the same result:
$('.icon-trash').on('click', function() {
$(this).parent().parent().remove();
});
In this case, the parent() method is used twice to move up the DOM tree from the .icon-trash element to its parent .cont2 element, and then to its parent .item-append element, which is then removed.
If you just want to remove the class form the .item-append, try this
$('.icon-trash').on('click', function () {
$(this).closest('.item-append').removeClass('item-append');
});
https://api.jquery.com/removeclass/
I'm trying to group together jQuery click events for similar elements. Basically, I have the main div I want to add new classes to when a particular button is clicked. So I have
<div class="main"></div>
and I want to add new classes to that div depending on a few buttons I have
<div class="triggers">
<div class="changer" id="blue">Blue</div>
<div class="changer" id="red">Red</div>
<div class="changer" id="green">Green</div>
</div>
So I have the classes made up in CSS and then of course add them to the main div based on each of those buttons ID's being clicked
$(document).ready(function(){
$('#blue').click(function() {
$(".main").addClass("blue").delay(500).queue(function(){
$(this).removeClass("blue").dequeue();
});
});
$('#red').click(function() {
$(".main").addClass("red").delay(500).queue(function(){
$(this).removeClass("red").dequeue();
});
});
$('#green').click(function() {
$(".main").addClass("green").delay(500).queue(function(){
$(this).removeClass("green").dequeue();
});
});
});
My question is how can I go about grouping these click events together so that I'm not repeating the same code block over and over again based on each button's ID?
Register the click event on the common class, then grab the id which is the colour?
$(".changer").click(function() {
let colour = String($(this).attr("id"));
if (colour) {
$(".main").addClass(colour).delay(500).queue(function(){
$(this).removeClass(colour).dequeue();
});
}
})
My HTML looks like this
<div id="current"> </div>
<div class="data1">
<div class="foo"><p>Some Text</p></div>
</div>
<span onclick="replace()">Click to replace div</span>
My JQuery/javascript is like this
$(document).ready(function() {
$('.foo').click(function() {
alert('worked');
})
})
function replace() {
$('#current').html($('.data1').html());
}
The alert triggers fine on the .foo class within the .data1 div but after replacing the contents of #current with .data1, the onclick event doesn't trigger on the .foo class within the first div.
What am I missing? Any help would be appreciated!
Using .html() will create new HTML element but the event will not follow. You need to append a DOM element. The DOM element should be a clone of the original:
$('#current').empty().append($('.data1').clone(true));
.clone
.empty
.append
Since you're dynamically appending the element, use event-delegation
$('div').on('click', '.foo', function() {
alert('worked');
})
I'm using this to remove the div whenever I call my showresult(); function. I am dynamically creating this div <div class="sampageswrapper">, so this needs to be removed when ever showresult() is called.
function showresult(data) {
jQuery('.sampageswrapper div').remove();
// rest of my code.
}
But unfortunately this div is not removing.
<div class="sampageswrapper">
<div id="image_div" class="img_class" name="image_div">
..........
</div>
</div>
you can use the .samepageswrapper selector only
jQuery('.sampageswrapper').remove();
it should target that specific div.
when you use .sampageswrapper div as your selector, this targets all the div's inside the div element with sampageswrapper class
How do i even put these, let me try. In the following sets of codes, i want to click 'parentclass' and have an alert value of 'child1' and when i click the class below it which is 'Parent 2' have an alert fire with a value of 'child2'
So this must alert the content of that class only and not the entire class.
Here's some Javascript in Jquery.
var childclass = $('.childclass').html();
$('.parentclass').click(function(e) {
alert (childclass)
});
$('.childclass').click(function(e) {
e.stopPropagation()
e.preventDefault()
});
And HTML
<a href="" onClick="return false">
<div class='parentclass'>
Parent 1
<div style="display:none" class="childclass">child1</div>
</div>
</a>
<a href="" onClick="return false">
<div class='parentclass'>
Parent 2
<div style="display:none" class="childclass">child2</div>
</div>
</a>
This line var childclass = $('.childclass').html(); doesnt make sense as it doesn't know which element in particular you mean. The result of that will just be child1child2 which is just a concatenation of the .html() of all the elements with class childclass. This is obviously not what you want.
Therefore you should dynamically find the child with a class of childclass upon receiving the click event.
$('.parentclass').click(function(e) {
alert($(this).find('.childclass').html())
});
Also, you should know that your child class event handler is useless as we don't care if the event gets propogated downwards. If you DID care, then your e.stopPropagation() and e.preventDefault() should be in the event handler of the parent class.
You need to fetch the html of the clicked parent element within the click handler
$('.parentclass').click(function (e) {
alert($(this).find('.childclass').html())
});
$('.childclass').click(function (e) {
e.stopPropagation()
e.preventDefault()
});
Demo: Fiddle
Several ways you can go about this.
First, if your HTML will not be dynamic (elements already exist when page loads), then you can select elements by the parent class name and assign click event as so:
$('.parentclass').click(function(e) {
// the first variable here is selecting the inner elements having class 'childclass'
// keep in mind, if more than one child having that class is present within this parent, it will select all of them
var child = $(this).find('.childclass');
// here we alert the text of the inner child found
// if it is more than one, you will have undesired results. you may want to specify `.first()`
alert(child.text())
})
For newer jQuery you can also use $('.parentclass').on('click', function(e) {.
If you expect any pieces of parentclass to be dynamic, then you'll want to delegate the event based on either a static parent to the parents or document. This can be like so:
$(document).on('click', '.parentclass', function(e) {
alert($(this).find('.childclass').text())
})
Or, if you have a static (already there when page loads) wrapping element, give it an ID like `parentClassWrapper' and assign the click event dynamically as:
$('#parentClassWrapper').on('click', '.parentclass', function(e) {
alert($(this).find('.childclass').text())
})
Some helpful links:
jQuery API
jQuery Selectors
.click()
.on()
Some info on Event Delegation
jquery on vs click methods
jQuery .on('click') vs. .click() and .delegate('click')
jquery .live('click') vs .click()
I made several adjustments to your html that are worth noting. There's no need for the <a> tag. Don't use inline js - onlick in your html. Note that I wrapped the text inside of the div in the <a> tag instead. This markup is more semantic. Also, move your styles to css rather than in the html.
<div class="parent">
<a>Parent 1</a>
<a class="child">child of parent 1 contents</a>
</div>
<div class="parent">
<a>Parent 2</a>
<a class="child">child of parent 2 contents</a>
</div>
css:
.parent > .child { /* good practice: only select an immediate child of the parent */
display: none;
}
The other answers here are using find() to select the child, but I recommend children() instead. For example, if you had additional nested .childs, find() will select them all, but children() will only select direct .childs of the parent, so it is better in this case. I also recommend using the console for debugging rather than alert.
Live demo here (click).
$('.parent').click(function() {
var $child = $(this).children('.child');
var cls = $child.attr('class');
console.log(cls);
$child.show(); //added so that you can click the child
});
$('.child').click(function() {
var html = $(this).html();
console.log(html);
//if you just want the text, use this instead:
var text = $(this).text();
console.log(text);
});