I'm having code like following
$(document).on("pagebeforeshow", "#Newpage", function (event) {
$(".newtext").change( function() {
dostuff();
});
});
Now the problem is every time the NewPage is loaded , the binding of
$(".newtext").change( function()
occurs and it is triggered multiple times.So for 1st time if I open the page dostuff() happens once, if I navigate to some other page and come back to #Newpage again it occurs twice and so on
You can try this:
$(document).one("pagebeforeshow", "#Newpage", function (event)
set isFirstTime value true at very first, best place is deviceready event
window.sessionStorage.setItem("isFirstTime", true);
pagebeforeshow event occurs every time page before loads need to maintain in session storage or localstorage or local variable like that only
$(document).on("pagebeforeshow", "#Newpage", function (event) {
$(".newtext").change( function() {
if(window.sessionStorage.getItem("isFirstTime");){
dostuff();
}
});
});
In your function
function dostuff(){
window.sessionStorage.setItem("isFirstTime", false);
// do your code below...
}
I hope this example helps you problem.
Related
Getting a click event twice on the same element on this code and not use why
document.addEventListener('click', function (event) {
console.log("click");
if (!event.target.closest('.expand')) return;
console.log("clicked me");
}, false);
console on one click:
click x 2
clicked me x 2
Probably you are adding the event listener twice. Put a breakpoint or a log message to the line before document.addEventListener('click', function (event) {
seemed that adding the code wrapped oike the following was adding the code in memory twice event though it was on the page once... very strange, any anwser to this issue would be cool.
(window.onload = function () {
// code here
})();
If your issue is to set a click twice event on an elements before it render it's function, use
document.addEventListener('dblclick', function (e) { code.... } )
I need to check if user closed browser. There is no reliable way, but the most accurate way seems to use onbeforeunload and check if a link or a button was clicked. I will also add f5 and some other extra checking.
But I have problem with button. If I click button, ajax call will be made even if there is if(window.link_was_clicked==false) condition.
<button onclick="setLocation('http://dev.site.com/checkout/')" class="button" title="Checkout" type="button"><span><span>Checkout</span></span></button>
And script:
jQuery(document).on('click', 'button', function(event) {
window.link_was_clicked= true;
});
window.onbeforeunload = function() {
if(window.link_was_clicked==false){
//make ajax call
}
};
It seems the problem is because there is setLocation function attached to button onclick. Is there any way to trigger jQuery(document).on first?
That variable doesnt exist on before load. so add it on the top and try again
window.link_was_clicked=window.link_was_clicked||false;
jQuery(document).on('click', 'button', function(event) {
window.link_was_clicked= true;
});
window.onbeforeunload = function() {
if(window.link_was_clicked==false){
//make ajax call
}
};
Since you haven't provided the code for setLocation(), I'll assume that that's where the problem is. Now, regarding a change to the order of execution of your click event handlers:
It is in general bad to have both embedded onclick and jquery-bound handlers, it leads to all sorts of confusion. If you can't change the html, however, you could do what this guy suggests: https://stackoverflow.com/a/7507888/2685386
$(document).ready(function() {
var myClick = $('button').attr('onclick');
$('button').removeAttr('onclick');
$(document).on('click', 'button', function(e) {
window.link_was_clicked=true;
// do my other stuff here....
eval(myClick);// this will now call setLocation()
});
});
I currently have something like this code running:
function blah() {
jQuery(".class1").on("click", function() {
jQuery(this).text('Validate').addClass('class2').removeClass("class1");
//more stuff here
jQuery(".class2").on("click", function() {
jQuery(this).removeClass("class1");
//More stuff here
This is bad because the click events propagate, every click that occurs adds the click event multiple times. I tried closing off the first selector (like so) and having the click events seperately but the second click event never occurred(!):
function blah() {
jQuery(".class1").on("click", function() {
jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(".class2").on("click", function() {
jQuery(this).removeClass("class1");
//More stuff here
How do I structure code so that on the first click one thing happens, and the second click another thing happens without click events doubling
you need
jQuery(document).on("click", ".class1", function() {
jQuery(this).text('Validate').addClass('class2').removeClass("class1");
});
jQuery(document).on("click", ".class2", function() {
jQuery(this).removeClass("class1");
//More stuff here
});
Demo: Fiddle
I have a simple jQuery function as
$('.button').click(function(){
$("#target").slideToggle().load('http://page');
});
By slideToggle behavior, every click cause a slide, but the problem is that it will load url again too.
How can I limit the load() function to be performed only once, but slideToggle() on every click. In other words, how to prevent load() (only load, not the entire function) in the subsequent clicks?
$('.button')
.on('click.loadPage', function() {
$("#target").load('http://page');
$(this).off("click.loadPage");
})
.on('click.slideToggle', function(){
$("#target").slideToggle();
});
and another way without global vars:
$('.button')
.on('click', function() {
if ( !$(this).data("loaded") ) {
$("#target").load('http://page');
$(this).data("loaded", true);
}
$("#target").slideToggle();
});
Have a variable (global) which says whether it has been loaded or not. E.g:
var loaded = false;
$('.button').click(function(){
if(!loaded){
$('#target').load('http://page');
loaded = true;
}
$("#target").slideToggle();
});
This will cause the slideToggle to occur on every click, but the page to load only the once. :)
I have a jquery function that binds a select field on a form to multiple actions. It binds to both change and keyup, so that mouse and keyboard clicks are both captured.
$(document).ready(function(){
$('#user_id').bind('change keyup',function () {
calculateAmounts();
}).change();
});
This works perfectly.
However, in addition to running on the change and keyup functions, the calculateAmounts() function is also called when first loading the page. I'd like to prevent this code from running when the page is first loaded.
You're triggering a change event when you call .change() on the $('#user_id') element, which will call your change/keyup event handler. If you remove the .change() call, then that event won't be triggered when the page loads:
$(document).ready(function(){
$('#user_id').bind('change keyup',function () {
calculateAmounts();
});
});
try this (taking in consederation that #user_id is input field)
$(document).ready(function(){
var yourVAL = $("#user_id").val();
$('#user_id').bind('change keyup',function () {
if($("#user_id").val() != yourVAL){
calculateAmounts();
}
}).change();
});