This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
My dynamic posts are added by .load() and they enter the DOM as such:
<div class="post">
<h2>Basic Info</h2><button class="closer">X</button>
<div class="innerPost">
<h5>Notes:</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
My jQuery to remove the the post works on the static first post on the page but not the newly added dynamic ones. Here is the jQuery:
$(".closer").on('click', function() {
$(this).parent().remove();
});
I've been trying different selectors and reviewing similar problems from other people but still can't seem to get it work. Any help is much appreciated :)
This is because the elements are not in the DOM when the selector is run. Use event delegation.
$(document).on('click', ".closer", function() {
$(this).parent().remove();
});
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Here I have an example:
$('#key').on('click', function(){
$('.task').html("<button id='key'>Button</button>"+Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
</div>
How I can apply javascript for overwriting element and get different time for each button press?
Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.
$('#key').on('click', function(){
$('.datestr').html(Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
<span class='datestr'></span>
</div>
This question already has answers here:
jQuery OR Selector?
(6 answers)
Closed 6 years ago.
Here is my current code:
$(".close_btn").click(function(e) {
$(".box1").fadeOut(100);
$(".box2").fadeOut(100);
});
As you see, currently, when you click on .close_btn, both .box1 and .box2 will be hidden. Now I want to use $(this) and .closest() to hide just one box (the parent of clicked .close_btn, there are two .close_btn). I mean I want something like this:
$(".close_btn").click(function(e) {
$(this).closest(".box1" OR ".box2").fadeOut(100);
});
Is doing that possible?
You can just use a comma to separate multiple selectors:
$(".close_btn").click(function(e) {
$(this).closest(".box2, .box1").fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<button class="close_btn">Close</button>
</div>
<div class="box2">
<button class="close_btn">Close</button>
</div>
This question already has answers here:
How can I select an element with multiple classes in jQuery?
(14 answers)
Closed 6 years ago.
This is probably a silly question.
I have this class
<div class="about_us aperto">
how do I call it in a JS function?
I'm trying:
$('.about_us aperto').click(function(){...
$('.about_us .aperto').click(function(){...
but they do not work.
You have to connect them. The proper selector would be:
$('.about_us.aperto')
If you wants to select an element having multiple classes like <div class="classA classB ClassC"></div> then just join them together in JavaScript i.e. $('.classA.classB.classC').click(function() {...});
$('.about_us.aperto').click(function() {
$(this).toggleClass('active');
});
.active {
background: #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="about_us aperto">
<p>Lorem ipsum dolor sit amet</p>
</div>
This question already has answers here:
How do I select text nodes with jQuery?
(12 answers)
Closed 7 years ago.
In below code, I want to hide the "Lorem Ipsum is a dummy content" by showing the other elements inside the parent container, either by using jquery, javascript or CSS? Solution much appreciated.
<div class="someWrapper">
Lorem Ipsum is a dummy content
<div class="anotherContainer">
<p>Text goes here</p>
</div>
</div>
To do that you need to target the textNode of the .someWrapper element and remove them from the DOM. To do that you can use filter() and remove(). Try this:
$('.someWrapper').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE; // 3
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someWrapper">
Lorem Ipsum is a dummy content
<div class="anotherContainer">
<p>Text goes here</p>
</div>
</div>
You can do this with a one liner, either with plain JavaScript:
document.getElementsByClassName('someWrapper')[0].firstChild.remove();
jsFiddle example
or jQuery:
$($('.someWrapper').get(0).firstChild).remove();
jsFiddle example
You can select inner content, empty outer element and append inner ounce again:
$(document).ready(function(){
$outer = $('.someWrapper');
$inner = $('.anotherContainer');
$outer.empty();
$outer.html($inner);
});
here is fiddle: https://jsfiddle.net/woo3cgwx/
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
How can I run the jQuery script for new created DOM elements?
Look at the following code, if I click the class .elem it will run the code, but if I append new .elem the script won't run.
JS:
$('.elem').on('click', function(){
$('.result').show().fadeOut('slow');
});
$('.add').on('click', function(){
$('.block').append('<div class="elem">Element</div>');
});
HTML:
<div class="block">
<div class="elem">Element</div>
<div class="elem">Element</div>
<div class="elem">Element</div>
</div>
<p><span class="add">Add new</span></p>
<div class="result">Result</div>
JSFiddle here: http://jsfiddle.net/3Y3Cn/3/
Any help is hightly appreciated. Thanks you;
Use event delegation with any static parent element:
$('.block').on('click', '.elem', function() {
$('.result').show().fadeOut('slow');
});
DEMO: http://jsfiddle.net/3Y3Cn/4/
You should use event delegation:
$('.block').on('click', '.elem', function(){
$('.result').show().fadeOut('slow');
});