Develop Reference

Jquery preventDefault(return false;) doesnt work always

I have this piece of code and i can't prevent default link event all the time. It's working like 90% of the times, but the rest 10% my code doesn't run, get no error message and put a # on the end of my url. I have # on my href on my a tag.
I use .on() because sometimes the element is loaded after the document is ready. And i use .off() because before i used it, sometimes triggered more than once when i clicked on it. The strange part is sometimes. I don't get it how can a code sometimes work and sometimes dont. Shouldn't be the same result all the time?
Sorry for the lot of comments.
Here is my full jquery code:
//Handle box opening and closing
var boxcontent_width = $(".box-content").css("width");
$(".boxarrow").addClass("done");
$(document).on("click",".boxarrow", function(event){
var serial = $(this).parent().parent().attr("serial");
var clink = $(document).find("[comment-link='"+serial+"']");
if(clink.hasClass("open")){
clink.click();
}
if($(this).hasClass("done")){
$(this).removeClass("done");
$(document).find("#comment-box"+$(this).parent().parent().attr("serial")).slideUp(250);
if($(this).parent().parent().find(".box-content").is(":hidden")){
$(this).attr("src","source/up_arrow.png");
}else{
$(this).attr("src","source/down_arrow.png");
}
$(this).parent().parent().find(".box-content").slideToggle(500,function(){
$(this).parent().find("div img").addClass("done");
});
}
return false;
});
//Handle votes
$(document).on("click","#positive-button, #negative-button", function(event){
var serial = $(this).parents(".tutorial-box").attr("serial");
var vote = 0;
if($(this).attr("id") == "positive-button"){
vote = 1;
}
$.post("vote.php",{
php_tutorial_id: serial,
php_vote_value: vote
},function(data){
if(data.localeCompare("error") && data){
if(data > 9999)data = 9999;
if(data < -9999)data = -9999;
if(data > 0){
data = "+"+data;
}
$("#tutorial-vote"+serial+" p").fadeOut(250, function(){
$("#tutorial-vote"+serial+" p").html(data).fadeIn(250);
});
}
});
return false;
});
//Handle comment opening and closing
$(document).on("click",".showcomments", function(event){
if($(this).hasClass("open")){
$(this).html("<p>Show comments</p>");
$(this).removeClass("open");
}else{
$(this).html("<p>Hide comments</p>");
$(this).addClass("open");
}
var clink = $(this).attr("comment-link");
var is_open = $(this).hasClass("open");
$(this).parents().find("#"+clink).slideToggle(500);
return false;
});
//Handle add comment button
$(document).on("click",".comment-button", function(event){
var serial = $(this).attr("serial");
serial = "#comment-box"+serial;
$(document).find(".comment-box").not(serial).slideUp(250);
$(document).find(serial).slideToggle(250);
return false;
});
$(document).on("click",".comment-box-submit", function(event){
var tutorial_id = $(this).parent().attr("serial");
var comment_text = $(this).parent().find(".comment-box-area");
var serial = $(this).parent().attr("serial");
$.post("send_comment.php",{
php_tutorial_id: tutorial_id,
php_comment_text: comment_text.val()
},function(data){
$(document).find("#comment-response"+serial).fadeOut(500, function(){
if(data){
$(document).find("#comment-response"+serial).html(data);
$(document).find("#comment-response"+serial).fadeIn(500);
}else{
$(document).find("#comment-response"+serial).html("");
$.post("reflesh_comments.php",{
php_tutorial_id: tutorial_id
},function(data){
if($(document).find("#"+tutorial_id).is(":hidden")){
$(document).find("#"+tutorial_id).html(data);
}else{
$(document).find("#"+tutorial_id).fadeOut(500, function(){
$(document).find("#"+tutorial_id).html(data);
$(document).find("#"+tutorial_id).fadeIn(500);
});
}
});
$(document).find("#comment-response"+serial).html("");
comment_text.val("");
}
});
});
return false;
});
$(document).on("click",".comment-remove", function(event){
var serial = $(this).attr("serial");
var tutorial_serial = $(this).parent().parent().parent().attr("id");
$("#overlay-box").load("overlay_boxes/remove_comment.php", { php_serial: serial, php_tutorial_serial: tutorial_serial }, function(){
$("#overlay-box").fadeIn(250);
$("#overlay").fadeIn(250);
});
return false;
});
$(document).on("click",".comment-reply", function(event){
var serial = $(this).parent().parent().attr("serial");
var owner = $(this).parent().parent().find(".comment-owner").html();
var owner_id = $(this).attr("serial");
$(document).find("#comment-box"+serial).find(".comment-response").hide();
$(document).find("#comment-box"+serial).slideDown(250);
$(document).find("#comment-box"+serial).find(".comment-box-area").val("#"+owner+": ");
$(document).find("#comment-box"+serial).find(".comment-box-area").focus();
return false;
});
$(document).on("click",".comment-report", function(event){
var serial = $(this).attr("serial");
var tutorial_serial = $(this).parent().parent().parent().attr("id");
$("#overlay-box").load("overlay_boxes/report_comment.php", { php_serial: serial }, function(){
$("#overlay-box").fadeIn(250);
$("#overlay").fadeIn(250);
});
return false;
});

You apparently have a multitude of issues, some of which we can't help with because you haven't included the relevant code.
You have your javascript code that attaches the event handler sometimes? executing more than once.
You are attaching the event to an element that may not exist at run time (are you executing the event handler attaching code when you insert it?)
You are removing all event handlers indiscriminately, possibly events that aren't your own.
The second and third problems are easy. Don't use
$(".comment-remove").off().on("click", function(event){
use
$(document).on('click','.comment-remove',function(event){
I would also recommend not using the serial attribute, but use data-serial instead, and instead of var tutorial_serial = $(this).parent().parent().parent().attr("id"); use something like var tutorial_serial = $(this).closest('.tutorial').attr("id"); which is more maintainable.

Remove the href property on your anchor to prevent it from adding a # at the end of your url:
<a href="#" serial="'.$data_id.'" class="comment-remove" '.$hidden_remove.' >Remove</a>
And I would suggest using:
$("body").on("click",".comment-remove",function(){...})
To prevent the event firing more than once, since you are setting the listener on the body once, instead of on, which could or could not be assigned to your ID as desired, depending on wether the element exists in the DOM when that line is ran.

How to prevent Wordpress built-in “browse link” entering the data in wp-editor

Working with Wordpress Meta Box and I used the code of Dale Sattler from this How can I use the built in Wordpress “browse link” functionality? to create a custom field with wp browse link it works fine, but it inserted the data in wp-editor too.
I try to prevent the default event using code here Use WordPress link insert dialog in metabox? but doesn't work, I try that code too but it have a bug too.
here is my code
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var input_field = '';
/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners
function _init() {
$('body').on('click', '.link-btn', function(event) {
_addLinkListeners();
_link_sideload = false;
input_field = $(this).attr('href');
var link_val_container = $(input_field);
if ( typeof wpActiveEditor != 'undefined') {
wpLink.open();
wpLink.textarea = $(link_val_container);
} else {
window.wpActiveEditor = true;
_link_sideload = true;
wpLink.open();
wpLink.textarea = $(link_val_container);
}
return false;
});
}
/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
console.log(linkAtts);
var link_val_container = $(input_field);
link_val_container.val(linkAtts.href);
_removeLinkListeners();
return false;
});
$('body').on('click', '#wp-link-cancel', function(event) {
_removeLinkListeners();
return false;
});
}
function _removeLinkListeners() {
if(_link_sideload){
if ( typeof wpActiveEditor != 'undefined') {
wpActiveEditor = undefined;
}
}
wpLink.close();
wpLink.textarea = $('html');//focus on document
$('body').off('click', '#wp-link-submit');
$('body').off('click', '#wp-link-cancel');
}
/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
init: _init,
};
})(jQuery);
please help, please ....

Ok I think I found a way to remove the link from the content. In your submit event you need to add:
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
var link_val_container = $(input_field);
link_val_container.val(linkAtts.href);
var $frame = $('#content_ifr'),
$added_links = $frame.contents().find("a[data-mce-href]");
$added_links.each(function(){
if ($(this).attr('href') === linkAtts.href) {
$(this).remove();
}
});
_removeLinkListeners();
return false;
});
$('#content_ifr') is the iframe that loads tinymce editor with content inside. Since the iframe is loaded from the same domain you can mess around it (luckily). So you just go through its contents and you're looking for anchors that have data attribute called mce-href, and if the link that you've just added has the href value as the one you've added it removes them.
I re did this part of the code because I've noticed that all the links in my content had this attribute so you cannot just remove all anchors that have
data-mce-href attribute because that would remove all of them. And you only want to remove those you've added in your metabox.
This did the trick for me :)

Avoiding jQuery Mobile Memory Leak from Closures

I am attempting to create a jQuery plugin for my own use that can be used to setup a handler for jQuery mobile dialogs using a single command as such: $('#dialog').setup_dialog({ callback: callback_function });
However, my handler has a rather obvious memory leak due to closures in it:
$.fn.setup_dialog = function( options ) {
var settings = $.extend({
callback : 0
}, options);
var that = this;
return this.live('pagebeforeshow', function(event, ui) {
console.log("outside");
$('form', that).submit( function(e) {
var $inputs = $('form :input', that); // get all form inputs
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
that.dialog('close');
if ( settings.callback && typeof(settings.callback) === "function" ) {
$('#'+ui.prevPage[0].id).live('pagebeforeshow', function() {
settings.callback(values, that);
console.log("inside");
});
}
return e.preventDefault();
});
});
}; /* setup_dialog */
If you ran the above code, you would see "inside" and "outside" printed first once, then three times (twice from a single submit), then six times (three times from a single submit), etc.
The intent of the code is to attach an event handler to the jQuery Mobile dialog when it comes up that will catch form submission, collect all the form values, and then pass them to a callback function that will modify the original page (that launched the dialog).
Note that because of the way jQuery Mobile uses AJAX to switch between pages, I need to use .live to bind the events (.bind or .one won't work).
Any ideas how I can avoid the events accumulating (and maybe clean up the code a bit as well)?

You are binding event handlers inside of other event handlers. And the outer event handlers are not unique events (they occur more than once) which means that your inner event handlers are being bound more than once.
A good fix is to remove the submit event handler from the pagebeforeshow event handler and place it in a pagecreate or pageinit event handler (these are unique and will only run once per dialog).
If you want to keep your current logic then you can just unbind event handlers when they run, so you won't be stacking multiple event handlers that do the same thing:
$.fn.setup_dialog = function( options ) {
var settings = $.extend({
callback : 0
}, options);
var that = this;
return this.live('pagebeforeshow', function(event, ui) {
console.log("outside");
$('form', that).submit( function(e) {
var $inputs = $('form :input', that); // get all form inputs
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
that.dialog('close');
if ( settings.callback && typeof(settings.callback) === "function" ) {
$('#'+ui.prevPage[0].id).live('pagebeforeshow', function() {
settings.callback(values, that);
console.log("inside");
$(this).die('pagebeforeshow');//NEW, unbind the pagebeforeshow event handler for this element
//since it will be bound the next time the dialog is shown anyway
});
}
$(this).die('submit');//NEW, unbind the submit event handler for this form
//since it will be bound the next time the dialog is shown anyway
return e.preventDefault();
});
});
}; /* setup_dialog */
Here is the documentation for .die(): http://api.jquery.com/die/

The solution appears to be the following:
$.fn.setup_dialog = function( options ) {
var settings = $.extend({
callback : 0
}, options);
var that = this; var values = {}; var submitted = 0;
this.on('pageinit', function(event, ui) {
$('form', that).submit(function(e) {
var $inputs = $('form :input', that); // get all form inputs
submitted = 1;
$inputs.each(function() {
values[this.name] = $(this).val();
});
that.dialog('close');
return e.preventDefault();
});
$('.cancel-button', that).click(function() {
submitted = 0;
});
});
this.on('pagebeforehide', function(event, ui) {
if ( submitted && settings.callback && typeof(settings.callback) === "function" ) {
settings.callback(values, that);
}
});
}; /* setup_dialog */
There were multiple ways to do this, including creating a closure and calling $('#'+ui.prevPage[0].id).die().live('pagebeforeshow', function() {
Not convinced this is the nicest solution though, so I'd love to hear some better ideas.

How to use both onclick and ondblclick on an element?

I have an element on my page that I need to attach onclick and ondblclick event handlers to. When a single click happens, it should do something different than a double-click. When I first started trying to make this work, my head started spinning. Obviously, onclick will always fire when you double-click. So I tried using a timeout-based structure like this...
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
el.onclick = function() {
timer = setTimeout(function() { alert('Single'); }, 150);
}
el.ondblclick = function() {
clearTimeout(timer);
alert('Double');
}
}
But I got inconsistent results (using IE8). It would work properly alot of times, but sometimes I would get the "Single" alert two times.
Has anybody done this before? Is there a more effective way?

Like Matt, I had a much better experience when I increased the timeout value slightly. Also, to mitigate the problem of single click firing twice (which I was unable to reproduce with the higher timer anyway), I added a line to the single click handler:
el.onclick = function() {
if (timer) clearTimeout(timer);
timer = setTimeout(function() { alert('Single'); }, 250);
}
This way, if click is already set to fire, it will clear itself to avoid duplicate 'Single' alerts.

If you're getting 2 alerts, it would seem your threshold for detecing a double click is too small. Try increasing 150 to 300ms.
Also - I'm not sure that you are guaranteed the order in which click and dblclick are fired. So, when your dblclick gets fired, it clears out the first click event, but if it fires before the second 'click' event, this second event will still fire on its own, and you'll end up with both a double click event firing and a single click event firing.
I see two possible solutions to this potential problem:
1) Set another timeout for actually firing the double-click event. Mark in your code that the double click event is about to fire. Then, when the 2nd 'single click' event fires, it can check on this state, and say "oops, dbl click pending, so I'll do nothing"
2) The second option is to swap your target functions out based on click events. It might look something like this:
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can stop it
if(firing)
return;
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
el.ondblclick = function() {
firingFunc = doubleClick;
// Now, when the original timeout of your single click finishes,
// firingFunc will be pointing to your doubleClick handler
}
}
Basically what is happening here is you let the original timeout you set continue. It will always call firingFunc(); The only thing that changes is what firingFunc() is actually pointing to. Once the double click is detected, it sets it to doubleClick. And then we always revert back to singleClick once the timeout expires.
We also have a "firing" variable in there so we know to intercept the 2nd single click event.
Another alternative is to ignore dblclick events entirely, and just detect it with the single clicks and the timer:
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can set it to doubleClick
if(firing){
firingFunc = doubleClick;
return;
}
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
}
This is untested :)

Simple:
obj.onclick=function(e){
if(obj.timerID){
clearTimeout(obj.timerID);
obj.timerID=null;
console.log("double")
}
else{
obj.timerID=setTimeout(function(){
obj.timerID=null;
console.log("single")
},250)}
}//onclick

Small fix
if(typeof dbtimer != "undefined"){
dbclearTimeout(timer);
timer = undefined;
//double click
}else{
dbtimer = setTimeout(function() {
dbtimer = undefined;
//single click
}, 250);
}

, cellclick :
function(){
setTimeout(function(){
if (this.dblclickchk) return;
setTimeout(function(){
click event......
},100);
},500);
}
, celldblclick :
function(){
setTimeout(function(){
this.dblclickchk = true;
setTimeout(function(){
dblclick event.....
},100);
setTimeout(function(){
this.dblclickchk = false;
},3000);
},1);
}

I found by accident that this works (it's a case with Bing Maps):
pushpin.clickTimer = -1;
Microsoft.Maps.Events.addHandler(pushpin, 'click', (pushpin) {
return function () {
if (pushpin.clickTimer == -1) {
pushpin.clickTimer = setTimeout((function (pushpin) {
return function () {
alert('Single Clic!');
pushpin.clickTimer = -1;
// single click handle code here
}
}(pushpin)), 300);
}
}
}(pushpin)));
Microsoft.Maps.Events.addHandler(pushpin, 'dblclick', (function (pushpin) {
return function () {
alert('Double Click!');
clearTimeout(pushpin.clickTimer);
pushpin.clickTimer = -1;
// double click handle here
}
}(pushpin)));
It looks like the click event masks the dblclick event, and this usage is clearing it when we add a timeout. So, hopefully, this will work also with non Bing Maps cases, after a slight adaptation, but I didn't try it.

Changing HTML on click in D3.js disables doubleclick [duplicate]

I've toggled click event to a node and I want to toggle a dbclick event to it as well. However it only triggers the click event when I dbclick on it.
So How do I set both events at the same time?

You have to do your "own" doubleclick detection
Something like that could work:
var clickedOnce = false;
var timer;
$("#test").bind("click", function(){
if (clickedOnce) {
run_on_double_click();
} else {
timer = setTimeout(function() {
run_on_simple_click(parameter);
}, 150);
clickedOnce = true;
}
});
function run_on_simple_click(parameter) {
alert(parameter);
alert("simpleclick");
clickedOnce = false;
}
function run_on_double_click() {
clickedOnce = false;
clearTimeout(timer);
alert("doubleclick");
}
Here is a working JSFiddle
For more information about what delay you should use for your timer, have a look here : How to use both onclick and ondblclick on an element?

$("#test-id").bind("click dblclick", function(){alert("hello")});
Works for both click and dblclick
EDIT --
I think its not possible. I was trying something like this.
$("#test").bind({
dblclick: function(){alert("Hii")},
mousedown: function(){alert("hello")}
});
But its not possible to reach double click without going through single click. I tried mouse down but it does not give any solution.

I pretty much used the same logic as Jeremy D.
However, in my case, it was more neat to solve this thing with anonymous functions, and a little slower double click timeout:
dblclick_timer = false
.on("click", function(d) {
// if double click timer is active, this click is the double click
if ( dblclick_timer )
{
clearTimeout(dblclick_timer)
dblclick_timer = false
// double click code code comes here
console.log("double click fired")
}
// otherwise, what to do after single click (double click has timed out)
else dblclick_timer = setTimeout( function(){
dblclick_timer = false
// single click code code comes here
console.log("single click fired")
}, 250)
})

you need to track double click and if its not a double click perform click action.
Try this
<p id="demo"></p>
<button id='btn'>Click and DoubleClick</button>
<script>
var doubleclick =false;
var clicktimeoutid = 0;
var dblclicktimeoutid = 0;
var clickcheck = function(e){
if(!clicktimeoutid)
clicktimeoutid = setTimeout(function(){
if(!doubleclick)
performclick(e);
clicktimeoutid =0;
},300);
}
var performclick =function(e){
document.getElementById("demo").innerHTML += 'click';
}
var performdblclick = function(e)
{
doubleclick = true;
document.getElementById("demo").innerHTML += 'dblclick';
dblclicktimeoutid = setTimeout(function(){doubleclick = false},800);
};
document.getElementById("btn").ondblclick = performdblclick;
document.getElementById("btn").onclick=clickcheck;
</script>

a slightly different approach - The actual click comparison happens later in the timeOut function, after a preset interval... till then we simply keep tab on the flags.
& with some simple modifications (click-counter instead of flags) it can also be extended to any number of rapid successive clicks (triple click, et al), limited by practicality.
var clicked = false,
dblClicked = false,
clickTimer;
function onClick(param){
console.log('Node clicked. param - ',param);
};
function onDoubleClick(param){
console.log('Node Double clicked. param - ',param);
};
function clickCheck(param){
if (!clicked){
clicked = true;
clickTimer = setTimeout(function(){
if(dblClicked){
onDoubleClick(param);
}
else if(clicked){
onClick(param);
}
clicked = false;
dblClicked = false;
clearTimeout(clickTimer);
},150);
} else {
dblClicked = true;
}
};