We Keep Coding

Event click trigged twice though preventdefault is set

Some had this problem but I did not see any answer that fits mine.
Here is the html :
<div id="page">
......
<ul>
<li role="presentation">
<a id="selection"...... ></a>
</li>
<li role="presentation>
<a id="xxxx"></a>
</li>
<li role="presentation">
<a id="yyyyy"></a>
</li>
</ul>
.......
</div>
here is the javascript using Mootools (no choice) :
window.addEvent('domready', function() {
var myDivPage = document.id('page');
var as = myDivPage.getElements('li[role=presentation] a');
//as is an array of 3 elements
Array.each(as, function(element, index) {
if(element.id !== 'selection') {
element.addEvent("click", function(event) {
event.preventDefault();
event.stopPropagation();
alert("did you save?");
});
}
});
});
The event is indeed attached but when I click my link the alrt is displayed twice, as though the event occured twice. As you can see I stopped the propagation, so how could this happen ?
Thank you

The below if condition is inside a loop.
if(element.id !== 'selection')
The check is made for each element.id which is not equal to selection. So how many times, if condition is true? 2 One for id="xxxx" and other for id="yyyyy"
For click event to be triggered only once use
if(element.id === 'selection')

The code as displayed seems fine. Verify that your event handler isn't actually added twice (place an alert just before your Array.each loop)
$$('#page li[role=presentation] a:not(#selection)').addEvent("click",
function(event) { event.stop(); alert("Did you save?"); })
would be a more mootools-y way of doing this though.

Ignored attempt to cancel a touchstart : fastclick warning

I'm having the first popup on which another popup comes to select few fields.
To show the second popup this is the code I'm trying:
$("#select1").click(function(e) {
e.stopPropagation();
//$('#sellerModal').hide();
var tmplData = {
string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
};
$("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
that.closePopup();
$("#count_div").each(function() {
$("#count_div").click(function(evt) {
evt.stopPropagation();
$("#select1").text($(this).text());
$("#myCounttype").remove();
});
});
});
Here is the HTML template:
<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
<div id="myCounttype" class="popup1 layer-2">
<div class="popup5">
{{each string}}
<div id="count_div" class="popup4 bottom-border">${$value}</div>
{{/each}}
</div>
</div>
</script>
I'm getting a warning:
Ignored attempt to cancel a touchstart event with cancelable=false, for example, because scrolling is in progress and cannot be interrupted. fastclick.js
Here I'm not able to click the 4 out of 5 elements in the second popup. Only first 1 is clickable.
Snapshot of second popup.
I read all the blogs where the topic is disscussed. But didn't got any solution working for me. Looks like there is some corner case.

Try using some parent selector before $("#count_div").each(function() {
$("#count_div").click(function(evt) {
Like this $(".parent_class #count_div").each(function() {
$(".parent_class #count_div").click(function(evt) {
This will solve 1 time running each() for "#count_div".
So the actual problem is each() is running only 1 time, that's why your first element that is Ready click event is working, not others.

Your each function is pointing to id which makes you cannot click other buttons. You should use class to recognize the buttons.
$("#select1").click(function(e) {
e.stopPropagation();
//$('#sellerModal').hide();
var tmplData = {
string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
};
$("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
that.closePopup();
$(".pop_btns").each(function() {
$(this).click(function(evt) {
evt.stopPropagation();
$("#select1").text($(this).text());
$("#myCounttype").remove();
});
});
});
HTML template:
<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
<div id="myCounttype" class="popup1 layer-2">
<div class="popup5">
{{each string}}
<div id="count_div" class="popup4 bottom-border pop_btns">${$value}</div>
{{/each}}
</div>
</div>
</script>

jQuery Adding / Removing classes on a button to hide elements

Trying to get a mobile footer menu (#mobile-menu) to hide / show when the floating button is clicked or tapped. I'm able to add the click event handler to the button (#mobile-footer-btn) which in turns applies a class to the menu and animates it off screen.
<footer id="mobile-footer">
<div id="mobile-menu">
<div id="mobile-footer-container">
<div class="mobile-link">
My Account
</div>
<div class="mobile-link">
Reviews
</div>
<div class="mobile-link">
Contact Us
</div>
</div>
</div>
<div id="mobile-footer-close">
<button id="mobile-footer-btn">
<div class="mobile-btn-close">
<span></span>
</div>
</button>
</div>
</footer>
For whatever reason, I'm not able to remove that class and add a new class to the same ID, which would add a class to show the menu again.
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
//Trigger closing the footer menu
$(mobileBtn).on("click", function() {
$(mobileMenu).addClass('mobile-menu-hide');
});
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
if($(mobileMenu).hasClass('mobile-menu-hide')) {
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
});
}
});
Any help would be much appreciated!

You only need one on click event! Your if condition never gets evaluated to true, therefor your onclick event is never triggered. It's better to house it in one onclick event. Here's the code:
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
if($(mobileMenu).hasClass('mobile-menu-hide')) {
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
} else {
$(mobileMenu).removeClass("mobile-menu-show").addClass("mobile-menu-hide");
}
});
});
Here's the plunker: https://plnkr.co/edit/SG8eFns91wV4adxapFDB
Even better now that I think about it: just toggle the one class that hides the menu and just use jQuery's toggleClass function. Something like this:
$(mobileBtn).on("click", function(e) {
e.stopPropagation();
$(mobileMenu).toggleClass('mobile-menu-hide');
});

The problem is that your if condition in the block only executes once. However, you need it to be called on every click. Hence, you need to update your code to following
jQuery(document).ready(function($){
// Store menu container
var mobileMenu = '#mobile-menu';
// Store Trigger
var mobileBtn = '#mobile-footer-btn';
//Trigger closing the footer menu
$(mobileBtn).on("click", function() {
// moved your if block inside the click handler
if($(mobileMenu).hasClass('mobile-menu-hide')) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
} else {
$(mobileMenu).addClass('mobile-menu-hide');
}
});
$('.mobile-btn-close').click(function() {
$(this).addClass('is-rotating');
});
});

Your $(mobileBtn).on("click", function(e) { ... code never executes and, therefore, never adds the click event handler because the menu doesn't start out as .mobile-menu-hide Try this
$(mobileBtn).on("click", function(e) {
if($(mobileMenu).hasClass('mobile-menu-hide')) {
e.stopPropagation();
$(mobileMenu).removeClass("mobile-menu-hide").addClass("mobile-menu-show");
}
});

preventDefault doesn't work with external links?

So I have the following code:
JS
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
return true;
}
$("#close-link").click(function(event) {
event.preventDefault();
var targetUrl = $("#confirm").attr("href");
});
$("#confirm").click(function(event) {
event.preventDefault();
});
$("#go").click(function(event) {
event.preventDefault();
});
HTML
<div id="overlay">
<div id="dialog">
<h3 class="top-bar">Leaving so soon?</h3>
<span class="close-button-container">[X]</span><br /><br /><br />
Example text
<br />No, take me there anyway...
</div>
</div>
<!-- ... -->
Example Link
The Problem
I tried adding a link to another site. But I wanted to add a confirmation box once this link is clicked. The #close-link is used to close the dialog and the #confirm link as seen above should open it. The #go link is inside the dialog and if clicked brings the user to the location of the #confirm link. But something went wrong... Now when I click #confirm it opens the dialog for a second and directly sends me to its href. Shouldn't event.preventDefault fix this? If so, then why doesn't it?

Add an event to overlay(event). This function needs to prevent the click so it should have the e.preventDefault()
Example Link
function overlay(event) {
event.preventDefault();
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
var href = event.target.href
//If click button close
//Hidden div, no go
//If click button go
//window.location = href
}
Explanation
Your <a> has two events binded to it. One with #confirm and one with the inline onclick=. You should choose only one :)

So, a few things;
Remove all inline event handlers
When using jQuery, make the most of it and avoid writing vanilla javascript unless there is a reason to do so.
Do not use A for any other purpose than an actual link (The close button in your case). Use a button/other tags.
Take a look the below code and see if that's what you wanted.
$("#confirm, #close-link").click(overlay);
function overlay(evt) {
evt.preventDefault();
var el = $("#overlay");
el.css({"visibility": el.css("visibility") === "visible" && "hidden" || "visible"});
if ( this.tagName === 'A' ) {
el.find("a").attr("href", this.href);
}
}
#overlay {
height: 150px;
width: 200px;
background: green;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
<div id="dialog">
<h3 class="top-bar">Leaving so soon?</h3>
<span class="close-button-container" id="close-link">[X]</span><br /><br /><br />
Example text
<br />No, take me there anyway...
</div>
</div>
<!-- ... -->
Example Link

If your code was called as part of an event listener callback, event.preventDefault() would work. But your code is running due to onclick which simply runs the function overlay() - attaching listeners to various elements (#close-link, #go, #confirm) using jQuery. After the listeners are attached, they start listening for events, which never come since the <a href="..."> changes the page.
Solution:
It is best to stop using on* attributes for all your codes. Take it out. Then use only event listeners for all your needs.
$('#confirm').on('click', function(event) {
event.preventDefault(); // this will work
// Do your toggle visibility and whatever else you need here.
});
There are other possible solutions that continue to use onclick calling a function, but I wouldn't recommend it.

Try attaching the click event to the #confirm element inside $(document).ready:
$(document).ready(function() {
$("#confirm").on("click", function(event) {
event.preventDefault();
});
});

Styled Select Fields with jquery and HTML Listelements

i have a little problem with my styled Selectfield. I used for this unordered list elemnts (UL / LI) and a H3.
The problem is to close the "Selectfield" by clicking anywhere on the page.
When i bind a click event to the "document", then don't open the SelectField with the current jQuery code.
I have hidden the UL Element by using CSS (display:none).
To open the Select Fields is not the problem. But only without the $(document).bind('click') [...] code.
I hope anyone have a resolution for my.
Thanks.
And here my HTML Code:
<div class="select_container">
<h3 class="reset">Select Items</h3>
<ul class="select_elements">
<li>Select Item 01</li>
<li>Select Item 02</li>
<li>Select Item 03</li>
</ul>
</div>
And here the jQuery Code:
$(document).ready(function(){
var selectFields = {
init: function(){
$('.select_container').on('click',function(){
$(this).find('ul.select_elements').toggle();
$(this).find('ul.select_elements').toggleClass('active');
});
$(document).bind('click',function(){
if( $('.select_elements').is(':visible')){
$('.select_elements.active').hide();
}
else if( $('.select_elements').is(':hidden')){
console.log('visible false ...');
}
});
}
};
$(selectFields.init);
});

You need to use .stopPropagation in $('.select_container').on('click') function to prevent triggiring $(document).on('click')
You need to use toggleClass in $(document).on('click') too
$('.select_container').on('click',function(e){
$(this).find('ul.select_elements').toggle();
$(this).find('ul.select_elements').toggleClass('active');
e.stopPropagation();
});
$(document).on('click',function(){
if( $('.select_elements').is(':visible')){
$('.active').hide();
$('.select_elements').toggleClass('active');
}
else {
console.log('visible false ...');
}
});
FIDDLE

In jquery and javascript an event bubbles up so you have to use e.stopPropagation() on your container click.
check theese pages linki1 or link2 and a possible solution to your problem could be
<script type="text/javascript">
$(document).ready(function(){
var selectFields = {
init: function(){
$(document).bind('click',function(e){
if( !$('ul').hasClass('active')){
$('ul').hide()
$(this).find('ul.select_elements').toggleClass('active');
}
});
$('.select_container').on('click',function(e){
e.stopPropagation()
if( $('ul').hasClass('active')){
$('ul').show()
}else{ $('ul').hide() }
$(this).find('ul.select_elements').toggleClass('active');
});
}
};
$(selectFields.init);
})
</script>
With stopPropagation prevent the event from bubbling and being caught by the document when you click on the list
in some cases you can also use stopImmediatePropagation, for understand differences between stopPropagation and stopImmediatePropagation check this post Post
The only drawback to similar code and to and Batu Zet code, is that If you want the items in the list can be clicked without disappearing, you have to add another stopPropagation on ul tag
Tis is the final Fiddle