This question already has answers here:
jQuery - Appending a div to body, the body is the object?
(6 answers)
Closed 7 years ago.
I have the following code:
$('body').on('click' , function(){
$('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000);
});
My intent was to add the div and then remove it with a fadeout effect using the fadeout() function , now obviously the above code fades out the entire html document.
I have seen a few similar threads of SO, but they are with the fadeIn effect and the solution does't apply , also i checked the documentation and there is no callback function available for the append() and appendTo() which could have been a posible solution to my problem, so how do i go about fading the div that i added using the append() method ?
Use appendTo as this will return the appended div instead of body:
$('body').on('click', function(){
$('<div class="ajax-success"><p>Its Done !!!</p></div>').appendTo( this ).fadeOut(2000);
});
Your target is body so that is what fades out. Find a way to target the div you want. One of the easiest ways would be:
$('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>')
.find('.ajax-success')
.fadeOut(2000);
This presumes there is only one 'ajax-success'-classed element on the page. If more, find a way to make your addition unique.
Related
This question already has answers here:
Emulate jQuery "on" with selector in pure Javascript
(4 answers)
Closed 1 year ago.
At the moment the only thing, which makes me load ~100kb jQuery library are these 3 lines of code:
$(document).on('click', ".js-ya-share2-button", function() {
this.parentElement.querySelector('.ya-share2__item_more').click();
});
How to reproduce the full functionality of without jQuery?
The code above allows to "attach" a function to elements, which hasn't been loaded yet. For example, to elements, which are loaded only when user scrolls the page down.
How to make it with pure JavaScript?
This imo would be the exact analogy in vanilla JS:
document.addEventListener('click', function(event) {
const desiredTargetElement = event.target.closest('.js-ya-share2-button');
if (desiredTargetElement)
desiredTargetElement.parentElement.querySelector('.ya-share2__item_more').click();
});
The reason we need to work with closest here rather than checking if the event target has the desired class is that you can have scenarios where the clicked element is actually a descendant of the element you're looking out for.
closest(selector), if called on the element that already matches the desired selector, will return the element itself.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 1 year ago.
I want to hide a div using JQuery on click event of another div. The problem is that the div that I want to hide is actually created only when I click on the existing div.
Let me explain with code example:
HTML:
<div class="first">I already exist and I create the second div when I am clicked</div>
<div class="second">I do not exist yet, I am created when first div is clicked</div>
The above is happening by another piece of code that another developer wrote.
I want to write another piece of code that will hide the second div when its created right after first div is clicked.
I do not have the permission to change the original dev's original code.
My JQuery that is not working:
$(".first").on("click",function() {
$(".second").hide();
});
You should use this, cause you have to make this delegate.
explanation: https://api.jquery.com/on/
$("body").on("click", ".first",function() {
$(".second").hide();
});
This question already has answers here:
toggle show/hide div with button?
(8 answers)
Closed 8 years ago.
I'm trying to make a button which when clicked, makes a list appear/disappear.
How would I go about linking the two?
Would Javascript be the best option for this, or can this be achieved with CSS?
from what i understand, maka div with all the contents that you need to show on click. then write on click function for the button and use show() or toggle function to show the div.
$( "#buttonid" ).click(function() {
$('#divtoshow').show();
});
instead of show() you can use toggle() also.
jQuery will help you here.
You can use the click event along with show to achieve this
Using jquery it is very simple.
$("#buttonID").on('click',function(){
$("listID").toggleClass("contentVisibulity");
});
css
.contentVisibulity{
display:none;
}
Jquery Doc
This question already has answers here:
Add click function to dynamically created html tags
(5 answers)
Closed 8 years ago.
I am trying to implement a click function inside a div with some nested children tags such as span, td, etc. However, these nested tags are loaded dynamically, mostly using ajax(). The returned result is displayed using .html(data) function. However, once the data is changed and new tags are added, the old javascript written to detect the clicks no longer work.
I want to know if there is a way to make this work?
An example of what i am talking about can be found here.
You are supposed to attach the event handler on the wrapper element like so:
http://jsfiddle.net/V4Sfw/1/
$("#testing").on("click", "span", function() {
alert("now?");
});
$("#testing").html("<span>How about now?</span>");
You could use live to attach handlers that always work, as long you know the structure of the loaded HTML.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jQuery - How to Use slideDown (or show) function on a table row?
I have this structure, of the page: table cell expands when the mouse over it, and what I want is to slide down first div after this particular cell. I made my sliding div out of the <section> tag because I don't want it to be part of the table.
As you can see in my example slideDown function doesn't do anything, (may be I just made some mistake =) )
so here is the fiddle http://jsfiddle.net/9FC9D/1/
Your jsFiddle had a couple of issues:
a) jQuery wasn't being applied
b) You were binding the hover event to the wrong element (".box" rather than "section", and ".box" was an empty div without any layout).
It looked as if something was happening on hover but this was coming from the CSS rather the JS. I've tweaked your fiddle (http://jsfiddle.net/9FC9D/4/) so that your function is executed on hover (and changed it to slideToggle, otherwise you need to define an "in" function and an "out" function - see http://api.jquery.com/hover/ for more information).
Here's the updated jQuery:
$(document).ready(function () {
$("#wrapper section").hover(function() {
$(this).next('.box-content').slideToggle(500);
});
});
You still have some styling issues from your CSS - still not 100% sure what you're looking to achieve but happy to advise on those issues if you provide some more information on the desired effect.