Develop Reference

why I can't delete paragraph? [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I want to delete the paragraph that jquery create when I click the paragraph.
<p class="test">cutsom event</p>
<button class="clcik">click</button>
jquery:
$(function () {
"use strict";
$(".test").on("click", function () {
$(this).hide();
});
$("button").on("click", function () {
$("<p>delet this paragraph</p>").insertAfter($(this));
});
$("p").on("click", function () {
(this).hide();
});
});
update:
#LinkinTED solved it, but dose there best practice for for that code?

When you call this:
$("p").on("click", function () {
$(this).hide();
});
your paragraph doesn't exist yet, so this doesn't actually do anything.
You can do $('body').on('click','p', function(){}) instead

Your function will work on the paragraphs that are static in the page. However the dynamic added paragraphs won't. You'll need to bind the function on a static element.
$(function () {
/* obsolute while the last function is the same
$(".test").on("click", function () {
$(this).hide();
});*/
$("button").on("click", function () {
$("<p>delet this paragraph</p>").insertAfter($(this));
});
$(document).on("click", "p", function () {
$(this).hide();
// ^------ you forgot the $ here
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">cutsom event</p>
<button class="click">click</button>

How can I cancel setTimeout? [duplicate]

This question already has answers here:
Cancel/kill window.setTimeout() before it happens
(2 answers)
Closed 7 years ago.
I wrote this simple Javascript for auto and manually hiding bootstrap alerts.
$(function () {
$.ajaxSetup({ cache: false });
$("[data-hide]").on("click", function () {
$(this).closest("." + $(this).attr("data-hide")).hide();
});
window.setTimeout(function () {
$(".alert").fadeTo(700).slideUp(700, function () {
$(this).hide();
});
}, 5000);
});
I want to cancel the setTimeout when the cancel button is clicked. How can I do this?

setTimeout returns a numeric timeoutId for your timer. You can pass that to the clearTimeout method.
$(function () {
var t = window.setTimeout(function () {
$(".alert").fadeTo(700).slideUp(700, function () {
$(this).hide();
});
}, 5000);
$("#yourHideButtonId").on("click", function () {
if(t!=null)
{
clearTimeout(t);
}
});
});

To start timer:
timer = window.setTimeout( f , 5000);
To clear it:
window.clearTimeout(timer);

Is there a way to make the window event to be triggered first [duplicate]

This question already has answers here:
Event capturing jQuery
(3 answers)
Closed 8 years ago.
I need to make the event of the window to be triggered first, on clicking on the #myDiv, is there a way to do it?
(function ($, w, d) {
$(d).ready(function () {
$(w).click(function() {
alert('window has been clicked');
});
$('#myDiv').click(function () {
alert('myDiv has been clicked');
});
});
})(jQuery, window, document);
check this out http://jsfiddle.net/au1hpj5L/

You could wrap the anonymous #myDiv function in a setTimout call set for 0 seconds, which would delay its execution in the event loop.
http://jsfiddle.net/2y5h8fgz/
(function ($, w, d) {
$(d).ready(function () {
$(w).click(function() {
alert('window has been clicked');
});
$('#myDiv').click(function(){
setTimeout(function () {
alert('myDiv has been clicked');
}, 0);
});
});
})(jQuery, window, document);

Jquery : After completion of 'fade in' effect, wait for 'click' event

How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});

I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line

Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready

$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});

How to add delay to jquery mouseover? [duplicate]

This question already has answers here:
Delay jquery hover event?
(6 answers)
Closed 7 years ago.
I have a bunch of images on one page and I am using the following to trigger an event:
$('.img').on('mouseover', function() {
//do something
});
Is there some way to add a delay such that if a user hovers for maybe 1 second, then it does "//do something" or actually triggers the "mouseover" event?

You can use setTimeout
var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
setTimeoutConst = setTimeout(function() {
// do something
}, delay);
}, function() {
clearTimeout(setTimeoutConst);
});

You could do that using a setTimeout along with a clearTimeout if the user leaves too soon:
var timer;
var delay = 1000;
$('#element').hover(function() {
// on mouse in, start a timeout
timer = setTimeout(function() {
// do your stuff here
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});

Use a timer and clear it when they mouseout incase they leave within 1000ms
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});

I was looking for something like this as well, but with a secondary delay as well. I took one of the answers here and expanded upon it
This example shows a div after X seconds of mouseover and hides it after X seconds of mouseout. But disables if you hover over the shown div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.foo{
position:absolute; display:none; padding:30px;
border:1px solid black; background-color:white;
}
</style>
<h3 class="hello">
<a href="#">Hello, hover over me
<span class="foo">foo text</span>
</a>
</h3>
<script type="text/javascript">
var delay = 1500, setTimeoutConst,
delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
setTimeoutConst = setTimeout(function(){
$('.foo').show();
},delay);
}).mouseout(function(){
clearTimeout(setTimeoutConst );
setTimeoutConst2 = setTimeout(function(){
var isHover = $('.hello').is(":hover");
if(isHover !== true){
$('.foo').hide();
}
},delay2);
});
</script>
Working example

You can use jquery .Delay like this (not tested):
$("#test").hover(
function() {
$(this).delay(800).fadeIn();
}
);
http://api.jquery.com/delay/