We Keep Coding

jQuery - Event delegation is occuring multiple times

I'm using event delegation in the pagination for my website. When you click the < or > buttons it moves the page up or down. The problem is that if you don't release the mouse button, in a split-second it will keep repeating the click handler.
How can I make it so that this event only occurs once per-click? Here's my code:
$(document).on('mousedown', '#prev', function(event) {
// Page is the value of the URL parameter 'page'
if (page != 1) {
page--;
var state = {
"thisIsOnPopState": true
};
history.replaceState(state, "a", "?page=" + page + "");
}
// Refresh is a custom function that loads new items on the page
refresh();
});

You should use "click" event instead of "mousedown" unless you have a unavoidable reason.
But "mousedown" or "touchstart" event occurs when a user start pressing the mouse button or screen and it will not be fired until you release the button and press it again.
So I assume you are using a chattering mouse or mouses which has macro software.
change event into "click" and see if it works and in the case "click" event is not gonna solve the issue,try using another mouse.
FYI,underscore methods _.throttle or _.debounce might help to support chattering mouses.
throttle_.throttle(function, wait, [options])
Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.
debounce_.debounce(function, wait, [immediate])
Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.
http://underscorejs.org/

If you want to use a "delegated" event handler rather than a "direct" event handler to bubble up the event, try to use a more specific target selector than $(document) like $('.some-class') where some-class is the class name directly above the #prev element.
I would also use either the mouseup or click events instead to avoid the mousedown event firing while the mouse click is held down.
According to the API:
The majority of browser events bubble, or propagate, from the deepest,
innermost element (the event target) in the document where they occur
all the way up to the body and the document element.
Try this:
// delegated "click" listener using a more specific target selector
$('.some-class').on('click', '#prev', function(event) {})
You may want to check your HTML to see if you are using #prev multiple times. Usually, just creating the listener on the target ID element should work fine.
// direct "click" listener on an ID element
$('#prev').on('click', function(event) {})

I haven't found the answer to this question, but I have found a solution that fixes the problem. What I have done is added a conditional that only allows the click event to occur once-per-click:
var i = 0;
$(document).on('click', '#prev', function(event) {
if (page != 1 && i === 0) {
page--;
var state = {
"thisIsOnPopState": true
};
history.replaceState(state, "a", "?page=" + page + "");
i = 1;
refresh();
}
});
// Resets 'i' for the next click
$(document).on('mouseup', function() {
i = 0;
});

Click event repeats 4 times

My code
var post = {};
post.DivPostContent = $('.content');
post.DivPostContent.live({
mouseenter:
function()
{
var post_id = $(this).attr('data-post_id');
var content_id = $('#content' + '_' + post_id);
var link = $('#link' + '_' + post_id);
content_id.find('.post_ratings').hide();
content_id.find('.post_actions').show();
//I removed the click event on a whim, i have no clue why it works
link.unbind('click');
link.click(function(){
post.link_action(post_id);
});
},
mouseleave:
function()
{
//does something
}
});
post.link_action = function(){
//Does some Ajax request
}
Before i unbinded the click event from "Link" it called "post.link_action" four times, i was trying to get my head around why it does that. After hours of reading through my code again and again, i thought to myself, let's try removing the click event and i mistakenly put that line in the wrong place(out of frustration i guess). I ran the code, and viola! it worked! How? I have no clue.
Now my question is, why does unbinding the click event before adding it stop the process from repeating itself? I really would like to know why.
Thanks.

because every time your mouse enter the object post.DivPostContent it's binding a new click event to your link object; it triggered 4 times because you moused over 4 times.
forget .live & .click; use .on instead and bind one time & outside your mouseenter event or if you insist to bind it in there use a .off before
$elem.off("click").on("click",function() {});
but do it once and outside your mousenter

Now my question is, why does unbinding the click event before adding it stop the process from repeating itself?
The code:
link.click(function(){
post.link_action(post_id);
});
Adds a callback to the click event, if you register multiple times, like in your case onmouseenter you will end up with the same event firing multiple times.
The unbind function removes any previous callbacks to the specific event, so this why the callback fires only one time.
By the way, unless your jQuery version is 1.4.3 or less you shouldn't be unsing live.
Use on which is available from version 1.7 ore delegate which is avaiable from version 1.4.4.

Long time between do event and handle it using jquerymobile/phonegap

I develop an app using phonegap and jquerymobile/jquery.
During development I only had a virtual iOS device and now since I'm testing the app on a real device I see, that time between click on an element and handle this event is very long.
E.g if i Click on an icon a loader icon is shown but this icon first come in the moment the next page is final loaded (a very short time the loader is shown).
I develop with Javascript since a long time and always have focus on performant execution but this is very strange.
The App has got about 10 views in one HTML file. And on click on an element only show the next part of these file.
Does anyone know about solutions to solve "Bugs" like these?
Thanks in advance.

The click delay on iPhones is a feature used to distinguish between clicks and scrolls. When you bind to the click event iOS waits approximately 300ms to decide whether you were clicking an object or trying to scroll the page.
You can use jQuery Mobile's vclick event which fires much faster however you will probably run into situations where the vclick event is fired off twice in a row which can result in multiple elements being clicked. Here is some sample code of how to use vclick events and only capture the event triggered first:
$(function () {
//setup a function to check if a vclick event has fired within the last 500ms
function check_vclick () {
//if a vclick event has fired in the last 500ms then return false
if (do_vclick == false) return false;
//otherwise set a flag to disallow vclicks for 500ms
do_vclick = false;
//setup a timeout to allow vclicks in 500ms
setTimeout(function () {
do_vclick = true;
}, 500);
//return true so the event handler knows it's ok to run its code
return true;
}
//setup a flag to allow/disallow vclick events from firing
var do_vclick = true;
//bind an event handler to the vclick event for an element
$('#link_id').bind('vclick', function () {
if (check_vclick()) {
//run the code associated with the element, if it's a link referencing a pseudo-page on the same HTML document, you can do something like this
$.mobile.changePage($(this.href));
}
});
});
Here's a link to the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html
Here's a link to the documentation for vclick (notice the notes under the virtual mouse event section): http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

JavaScript add an event listener any time and remove the event listener any time

In a web page I have a button when clicked it calls a JavaScript function.
In that function I show a modal dialog box and I want to process keystrokes only at this time. That is when the modal dialog is visible.
When I close the modal dialog I want to stop the keystroke processing.
consider that I click a button and function sam() is called.
function sam()
{
document.onkeypress = function(e) { processKeystroke(e); }
}
So now a function is attached to the keypress event. Whenever a key is pressed the function processkeystroke will be called.
The function sam is called only after I display the modal dialog box.
Now I am closing the modal dialog and with that I don't want function(e) { processKes...} to be called.
What should I do to remove the attached event listener from document.onkeypress.
Also I would like to have alternatives for the above approach because that one I assumed of my own and I did not refer any specific documentation, so I am really going through trial and error procedure to use event handlers or listeners.
So when I call function sam I want a function to be attached with the keypress event and if I call another function form example closedialog() I want that keypress listening function to be removed. Because I want to write proper code which should not consume lots of system resources.

Just write the following code to remove the handler.
document.onkeypress = null;
Since you are talking about attaching you maybe should check jquery which provides real bind (attach) and unbind (detach) for events like keypress.

Javascript how can I trigger an event that was prevented

In my app a user clicks a link to another page. I'd like to track that in Omniture with a custom event, so I've bound the omniture s.t() event to the click event. How can I make certain the event fires before the next page is requested?
I've considered event.preventDefault() on the click event of the link, but I actually want the original event to occur, just not immediately.

omniture's s.tl() function has a built-in delay

Some thing like this:
var cachedEvent = yourElement.onclick;
yourElement.onclick = function(){
s.t(); // Omniture thingy
cachedEvent(); // Old event
}

I don't know what Omniture events are, but just have
yourElement.onClick = function(){
omnitureFunction();
}
onmitureFunction = function() {
//stuff
myOtherFunction();//what onClick is "supposed to do"
}
So function2 happens only on successful completion of function1