We Keep Coding

Click handling function is not initiated [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
JS fiddle: http://jsfiddle.net/d9nat0gk/20/
let album_images_slider = new Swiper("#album_images_slider", {
direction: "horizontal",
slidesPerView: 1,
loop: true,
allowTouchMove: false,
speed: 600,
autoplay: {
delay: 3000
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
$(function() {
console.log("hello");
$("#album_images_slider").click(function(e) {
console.log("hello, mate!");
console.log(e.target.className);
if (e.target.classList.contains("swiper-slide")) {
console.log("hello!");
$("body *").hide();
$("body").before(`<div class="layer">Hey!</div>`);
}
});
$(".layer").on("click", function() {
console.log("Hi");
$(".layer").remove();
});
});
Block .layer is succesfully displayed on the screen, but for some reason when I click on .layer, .layer click handling isn't invoked.
What is the problem? And how can I solve that?
Any help would be highly appreciated!

The evaluation of the method $(".layer").on is performed on the elements when you call it, so if you try to console.log($(".layer")) just before that line, you will see that there are no elements with .layer at that point.
You should create and hide the <div.layer> at the start of your script or in the HTML, otherwise you can move the $(".layer").on(...) piece of code after you create the element (after $("body").before("<div class="layer">Hey!</div>");)

jQuery show div for 2 seconds then hide for 4 seconds in a loop [duplicate]

This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
Closed 5 years ago.
How to show a div for 2 seconds and then hide it for 4 seconds in an infinite loop? I use jQuery's animate() function because I want to use CSS transitions too.
function animatedText() {
setTimeout(function() {
$('.text').animate({ opacity: 1 }, 200, function() {
setTimeout(function() {
$('.text').animate({ opacity: 0 }, 200);
}, 1800);
});
}, 3800);
}
setInterval(animatedText(), 6000);
Here is my fiddle : https://jsfiddle.net/od6gm8t3/

I hope this will help you. Please check below code.
function animatedText() {
$('.text').animate({ opacity: 1 }, 200, function() {
setTimeout(function() {
$('.text').animate({ opacity: 0 }, 200);
}, 2000);
});
setTimeout(function() {
animatedText();
},6000);
}
animatedText();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="text">Animated Text</i>

setInterval only executing once inside of the jQuery each function [duplicate]

This question already has answers here:
Why does Jquery only affect the first div element? [duplicate]
(4 answers)
Closed 7 years ago.
I have 3 span elements with the id of "cursor", but the below function executes only for the first element.
$(document).ready(function() {
$("#cursor").each(function(i, current) {
console.log("ran");
var $current = $(current);
setInterval(function() {
cursorAnimation($current)
}, 600);
});
});
function cursorAnimation($obj) {
$obj.animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}

The ID selector will return only 0 or 1 DOM elements according to the JQuery documentation. You should not assign an ID to more than one element. Change the ID to a class and use the class selector $(".class")

jQuery - Waiting 2 seconds before hiding [duplicate]

This question already has answers here:
Add delay before .hide() w/jQuery
(2 answers)
Closed 8 years ago.
So, in my code the function is supposed to make #aboutPopOut slide to the left and then after 2 seconds, the fadescreen to .hide(). The sliding works, but the waiting and hiding does not. Here is my function;
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").wait(2).hide();
}, 500);
};
Please help me figure out what is wrong. All responses will be appreciated.

You are looking for the .delay method. You also have to pass a number to .hide to make it an animation method, otherwise .delay has no effect.
$("#fadeScreen").delay(2000).hide(0);

try this
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").delay(2000).hide();
}, 500);
};

Update the following..
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").delay(2000).hide();
}, 500);
};

How can i delay a function

Can someone assist me on how I can delay this function?
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
I want this lightbox to open after 7 seconds.

Use setTimeout():
setTimeout(lightbox, 7000);
function lightbox() {
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
}

Give setTimeout a shot:
setTimeout(function() {
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function() {
$('div.error').remove()
}
});
}, 7000);​

setTimeout(function(){
$('#customer_quote').lightbox_me({
centered: true,
closeSelect: ".close",
onClose: function(){
$('div.error').remove()
}
})
});
}, 7000);

Check this link out: To delay JavaScript function call using jQuery
Seems like you just use setTimeout with 7000

Use setTimeout.
var delayedFunction = function() {
/* your code */
}
setTimeout(delayedFunction, 7000);
The second argument stands for the number of miliseconds.
Note also that this evokes an asynchronous event. The execution of your code will not stop at the line with setTimeout for 7 seconds.
If you want to execute another code after this delay, you must do so in delayedFunction, when the event fires.