I am using JQuery hashchange event.
$(window).on('hashchange', function () {
//do something
});
When my url contains a hash during first time load I understand that this needs to be triggered with $(window).hashchange();
Can I place it inside document ready instead?
$(document).ready(function () {
$(window).on('hashchange', function () {
//do something
});
});
You can trigger it manually like:
$(document).ready(function () {
$(window).on('hashchange', function () {
//do something
}).trigger('hashchange');
});
Or you can do it like:
$(document).ready(function () {
//attaching the event listener
$(window).on('hashchange', function () {
//do something
});
//manually tiggering it if we have hash part in URL
if (window.location.hash) {
$(window).trigger('hashchange')
}
});
Related
Why following code written in jquery works great, but when I try to use it with vanilla js then it’s not working.
Here is WP Heartbeat API code - https://github.com/WordPress/WordPress/blob/master/wp-includes/js/heartbeat.js
jQuery(document).ready( function($) {
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
});
jQuery(document).ready( function($) {
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
});
jQuery(document).ready( function($) {
var event = new Event('heartbeat-tick');
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
window.dispatchEvent(event);
});
Your document event is not firing because you are dispatching the event on the window. Call document.dispatchEvent to dispatch it to the document.
jQuery(document).ready(function($) {
var event = new Event('heartbeat-tick');
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from document');
});
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from window');
});
console.log('window');
window.dispatchEvent(event);
console.log('document');
document.dispatchEvent(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The function below runs on document load and document resize:
$(window).on("resize", function () {
// code
}).resize();
How can I also trigger the function when the user clicks on <div id="my_div"></div> ?
You can explicitly create the callback function, like..
function callbackFn() {
var $caller = $(this);
// do something...
}
$(window).on('resize', callbackFn);
$('#my_div').on('click', callbackFn);
Move your function to some named function and call it on event:
function myFunction () {
alert('Working');
}
$(window).on("resize", function () {
myFunction();
}).resize();
$('#my_div').click(function () {
myFunction();
});
One way to achive that is by triggering the resize event inside the click event handler:
$('#my_div').on('click', function() {
$(window).trigger('resize');
});
How To prevent openContent(); to kick the $("#load-content").on("transitionend each time I click .show-content ???
I'm not sure how to stop this transitionend to be kicked! Please heeeelp
$('.show-content').on('click', function (e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click','.prev',function (e){
e.preventDefault();
closeContent(this);
});
function openContent(){
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$(this).addClass('animate');
var body = $("body,html");
body.animate({
scrollTop: 0
}, 800);
});
}
function closeContent(ele){
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
}
}
generally you should namespace the event and the off the event after being fired
$el.on('transitionend.mynamespace' function(){
$el.off('transitionend.mynamespace')
});
Example:
$dropdown.on('transitionend.fadein' function() {
// some function to be called on transitionend
doSomething();
// event will not be called again
$dropdown.off('transitionend.fadein')
});
UPDATE
adapted to your code
(you are also using way too many transitionend hendlers)
I created a namespace with e subnamespace
so now you can say
.off('transitionend.loadcontent ')
.off('transitionend.loadcontent.open ')
.off('transitionend.loadcontent.close ')
Try which one will do what you need
You should generallly read this: http://api.jquery.com/event.namespace/
Also the code doesn't look too amazing.
You should consider a more consequent codingstyle and cache selectors to improve readability and performance. E.g. I replaced all " with ' since you were using mixed quotes.
Maybe run jsHint in your editor and cache all elements that are needed more than once.
But that's not really important for this thing to work.
$('.show-content').on('click', function(e) {
e.preventDefault();
openContent();
});
$('#load-content').on('click', '.prev', function(e) {
e.preventDefault();
closeContent(this);
});
function openContent() {
$('#load-content').load('../views/product-page.html');
$('.container').addClass('loaded');
$('#load-content').on('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
$(this).addClass('animate');
var body = $('body,html');
body.animate({
scrollTop: 0
}, 800);
$('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
});
}
function closeContent(ele) {
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
$('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
}
}
you might need
$ele.one('click',function(){...})
which allows you to bind the event only one time. after being fired, this event listener will unbind itself. check document here:https://api.jquery.com/one/
I have an iframe on a page. In iframe there are few inputs in a form tag and more can be loaded via ajax.
I'm tring to bind blur or focus event to this inputs but it doesn't work. Other events, such as click works very well.
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find("input").focus(function() { // works but this is only for existing inputs
alert(1);
});
$(this).contents().find("form").on("click", "input", function (e) { // works
alert(1);
});
$(this).contents().find("form").on("focus", "input", function (e) { // doesnt work
alert(1);
});
});
});
});
Thanks in advance.
To select inputs and forms inside the iframe try this:
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find('body').find("input").blur(function() {
alert(1);
});
});
});
});
All my links .delete and .editRight within addedTemplate isent working. All the same links outside works just fine.
$(document).ready(function () {
AjaxGetAll();
$(".delete").on("click", function () {
//do stuff
});
$(".editRight").on("click", function () {
//do stuff
});
function AjaxGetAll() {
$.ajax({
success: function (data) {
if (data.hasOwnProperty("d")) {
var favs = data.d;
if (favs.length > 0) {
$("#addedList").html(
$("#addedTemplate").render(favs)
);
}
}
});
}
<script id="addedTemplate" type="text/x-jsrender">
<div class="wrapright">
<a id="editRight_{{>TimePin}}" class="editRight">Edit</a>
<a id="deleteRight_{{>TimePin}}" class="delete">Delete</a>
</div>
use event delegation based on .on() to register events for dynamically added contents
$(document).on("click", '.delete', function () {
//do stuff
});
$(document).on("click", '.editRight', function () {
//do stuff
});