Develop Reference

double event when opening modal more than once

I have a modal that when I open it, it detects a single click, until there everything is correct, the problem is when I close it and open it again, it begins to detect a double event (click) and if I close and open it again detects 3 events (clicks), it is made in vanilla js
HTML:
<div id="modal-container-gestion-documental" class="modal-container-gestion-documental">
<div class="modal-gestion-documental">
<div class="cabecera-modal">
<h3 class="">Gestión Documental</h3>
CERRAR
</div>
<br>
<div class="div-padre-gestor">
</div>
</div>
</div>
Javascript:
const modalContainerGestionDocumental = document.getElementById(
"modal-container-gestion-documental"
);
document.addEventListener("click", (e) => {
if (e.target.matches(".abrir-gestion-documental")) {
e.preventDefault();
modalContainerGestionDocumental.classList.add("show-modal");
}
if (e.target.matches(".cerrar-gestion-documental")) {
e.preventDefault();
modalContainerGestionDocumental.classList.remove("show-modal");
}
}
Css:
.modal-container-gestion-documental {
z-index: 2;
margin: 0 auto;
display: flex;
background-color: rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
position: fixed;
pointer-events: none;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
}
.modal-gestion-documental{
margin-top: 75px;
padding: 3rem;
background-color: #fff;
width: 85%;
height: 88%;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.show-modal {
pointer-events: auto;
opacity: 1;
}

Depends on where you have this document.addEventListener("click.. part of the code. Based on your description, it seems like that listener is being triggered every time the modal opens/closes.
Make sure to get the listener to be triggered only once on page load. If it's unavoidable, you can removeEventListener whenever the modal closes.

On clicking on a specific child a different jQuery should run

I developed a UI where you will click a card it will pop up but inside that card there are two links on which when I click it should not pop back. I know that those links are part of that card and I put an event on the card selector.
So I want to achieve this scenario:
When user clicks on a card no matter where ... it should pops up.. (Its doing it right now) but when user clicks on those two links it should not pop back ... it should show tabs which I will handle myself ... Just need a way that it should not pop back on clicking on those links because I want to fire another event to display tabs on those links.
I tried it with :not but it didn't work for me.
var card = $('.card');
card.click(function() {
if ($(this).hasClass('gravitate')) {
$(this).removeClass('gravitate');
$(this).addClass('levitate');
} else {
$(this).addClass('gravitate');
$(this).removeClass('levitate');
}
});
* {
padding: 0;
margin: 0;
}
body {
padding: 30px;
}
.card {
border: #ececec 1px solid;
padding: 10px;
width: 200px;
margin-bottom: 10px;
}
.tab-pane {
display: none;
}
.transition {
transition: all 500ms
}
.gravitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
width: 200px;
transform: translate(0, 0);
}
.levitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
width: 220px;
transform: translate(-10px, 5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane first-name">Omer</div>
<div class="tab-pane last-name">Hussain</div>
</div>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane first-name">Usman</div>
<div class="tab-pane last-name">Ali</div>
</div>

You can add an event handler to your links to check if the parent card has the levitate class and if so, stop the click event from bubbling up the DOM and triggering your other event handler:
$('a.tab').click(function(e) {
if ($(this).parent().hasClass('levitate')) {
e.stopPropagation();
}
})
var card = $('.card');
card.click(function() {
if ($(this).hasClass('gravitate')) {
$(this).removeClass('gravitate');
$(this).addClass('levitate');
} else {
$(this).addClass('gravitate');
$(this).removeClass('levitate');
}
});
$('a.tab').click(function(e) {
if ($(this).parent().hasClass('levitate')) {
e.stopPropagation();
}
})
* {
padding: 0;
margin: 0;
}
body {
padding: 30px;
}
.card {
border: #ececec 1px solid;
padding: 10px;
width: 200px;
margin-bottom: 10px;
}
.tab-pane {
display: none;
}
.transition {
transition: all 500ms
}
.gravitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0);
width: 200px;
transform: translate(0, 0);
}
.levitate {
box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3);
width: 220px;
transform: translate(-10px, 5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane" class="first-name">Omer</div>
<div class="tab-pane" class="last-name">Hussain</div>
</div>
<div class="card gravitate transition">
<h4>Sample Card</h4>
First Name | Last Name
<div class="tab-pane" class="first-name">Usman</div>
<div class="tab-pane" class="last-name">Ali</div>
</div>

If I understand it right, you want that any click on the card expands/retracts it, but not if the user clicks any of the links. If so, it's as simple as handling the hyperlinks click function separately and preventing the event to propagate. Just add this to your JavaScript:
var cardTabs = $('.tab');
cardTabs.click(function() {
alert("your handler");
return false;
});
You can also use prevent default and stop propagation methods of the click event, which are equivalent (see: event.preventDefault() vs. return false)
var cardTabs = $('.tab');
cardTabs.click(function(e) {
alert("your handler");
e.preventDefault();
e.stopPropagation();
});

jQuery - Click registered twice

I am making a web app that utilizes several pop ups. Inside the pop up, I have customized buttons (wrapped in <label>) that upload files. When I click on the button, it fires twice. I can solve the firing twice issue with e.preventDefault(); but obviously, it doesn't open the window for the user to upload a file.
if (document.getElementById("addItemModal").style.display !== 'none'){
$("#uploadImg").on('click', function(e) {
e.preventDefault();
console.log("I clicked upload image button.");
});
$("#uploadData").on('click',function() {
console.log("I clicked upload data button.");
});
}
So it seems that the first click is what opens the window to upload files and the second click is still a mystery. Where could this second click be coming from? I've tried .unbind as well and nothing seems to work.
EDIT: Added Code - Sorry for the wait, had to take out a lot but keep it functional and true to my problem.
var modal = document.getElementById('myModal');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Click Add Icon to make pop up appear
$("#myBtn").click(function() {
$("#myModal").fadeIn("fast");
$("#addModal").fadeIn("fast");
});
// Click 'x'
$("#close1").click(function() {
$("#myModal").fadeOut("fast");
});
if (document.getElementById("myModal").style.display != 'none') {
console.log("Pls don't be running twice.");
$("#upImgBtn").on('click', function(evt) {
evt.preventDefault();
console.log("I clicked upload image button.");
});
document.getElementById("upDataBtn").addEventListener('click', function() {
console.log("I clicked upload data button.");
});
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
/* -- Edited Headers ----------------------- */
h4 {
color: #333;
display: inline-block;
font-size: 1.6em;
letter-spacing: 3px;
font-weight: 500;
}
/* ---------------------------------------- */
.sideBar {
position: relative;
width: 18%;
height: 90%;
float: left;
z-index: 100;
border-right-style: solid;
border-right-width: thin;
border-right-color: #333;
background-color: white;
}
/* -- Header & Location ------------- */
.headbar {
height: 7%;
background-color: ghostwhite;
margin-bottom: 20px;
box-shadow: 0 3px 10px 1px #888888;
}
#myBtn {
float: right;
position: relative;
padding: 9px 3px 0 0;
cursor: pointer;
display: inline-block;
}
.uploadBtns {
padding: 10px 15px 10px 15px;
background-color: blue;
color: white;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 1px 5px 0 #888;
}
#myModal {
display: none;
position: fixed;
z-index: 1000000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
/* Modal Content */
#addModal {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 800px;
border-radius: 15px;
color: #404040;
}
/* -- Add Location Pop Up CSS ------ */
#addTable {
width: 100%;
height: 200px;
background-color: transparent;
border-collapse: collapse;
}
td {
background-color: transparent;
border-bottom: 1px solid #333;
}
tr {
height: 100px;
}
.gridTitle {
padding-left: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sideBar" class="sideBar">
<div id="headbar" class="headbar">
<h5> Home</h5>
<div id="myBtn"><span id="addIcon">+</span>
</div>
</div>
</div>
<div id="myModal">
<div id="addModal">
<h4 id="header">ADD ITEM</h4>
<span class="myClose" id="close1">×</span>
<hr>
<table id="addTable">
<tr id="step1">
<td class="gridTitle">UPLOAD</td>
<td></td>
<td colspan="2">
<label class="btn btn-file uploadBtns" id="upImgBtn">
Upload Image
<input type="file" accept="image/*" style="display: none;" id="upImg">
</label>
<label class="btn btn-file uploadBtns" style="margin-left:120px;" id="upDataBtn">
Upload Data File
<input type="file" style="display: none;" id="upData">
</label>
</td>
</tr>
</table>
</div>
</div>
EDIT2: I haven't included the script twice in my HTML either.

All this is happening because you are adding event to the label.
Here is your code in jsfiddle.
document.getElementById("upData").addEventListener('click', function() {
alert("I clicked upload data button.");
});
You can also make a control which element fired the event. You can put your event on label and alert only if the event was from label but this doesn't stop the click event to happen on the input button.
document.getElementById("upDataBtn").addEventListener('click', function(event) {
if( event.target.tagName === "LABEL" ) {
alert("I clicked upload data button.");
}
});
It is called once or twice cause of the bubbling because the input element is part of the label and is one union and therefor also received the event if the label is click (is is not bubbling, you can't do event.stopPropagation()).
If you make
document.getElementById("upDataBtn").addEventListener('click', function(event) {
console.log(event.target.tagName);
});
This will give you two tag names
LABEL
INPUT

Try this
$(document).on('click',"#upImgBtn", function(e) {
if (e.target !== this)
return;
console.log("I clicked upload image button.");
});
$(document).on('click','#upDataBtn', function(e) {
if (e.target !== this)
return;
console.log("I clicked upload data button.");
});

Continue propagation

I have some nested elements on my page with a same handler on them which should be called only for an event target without affecting elements higher in DOM tree. To achieve this behavior I used stopPropagation method and it was ok. Then I had to add some handlers for body and other elements outside the nested divs which should be called in any case. Of course stopPropagation isn't an option now but how can I make it work?
Here is a sample:
html:
<div id="container">
<div id="nested1" class="nested">
<div id="nested2" class="nested">
<div id="nested3" class="nested">
<div id="no-handler"></div>
</div>
</div>
</div>
</div>
css:
#container {
display: block;
width: 398px;
height: 398px;
padding: 30px;
border: solid 1px #888;
}
#nested1 {
width: 336px;
height: 336px;
padding: 30px;
}
#nested2 {
width: 274px;
height: 274px;
padding: 30px;
}
#nested3 {
width: 212px;
height: 212px;
padding: 30px;
}
#no-handler {
width: 150px;
height: 150px;
padding: 30px;
border: solid 1px #888;
}
.nested {
border: solid 1px #888;
}
.nested-clicked {
background-color: red;
}
.outer-clicked {
background-color: green;
}
js:
var container = document.getElementById("container");
var nested = document.getElementsByClassName("nested");
function outerHandler(e) {
this.classList.add("outer-clicked");
}
function nestedHandler(e) {
e.stopPropagation();
this.classList.add("nested-clicked");
}
container.addEventListener("click", outerHandler, false);
document.body.addEventListener("click", outerHandler, false);
for (var i = 0; i < nested.length; i++) {
nested[i].addEventListener("click", nestedHandler, false);
}
jsfiddle link:
http://jsfiddle.net/6kgnu7fr/
clicking on .nested should add red background color to clicked element and add green color to outer body and #container
UPD:
http://jsfiddle.net/6kgnu7fr/2/
clicking on #no-event or any other element inside .nested should also call nestedHandler for this .nested element.

You can check for the event's target in your nestedHandler instead of stopping the propagation. Change the class only if the target is this so that the effet will only be applied for the div on which the event occurred:
function nestedHandler(e) {
if (e.target === this) {
this.classList.add("nested-clicked");
}
}
Edit
Following your edit, this is harder. Way to do it is to find e.target's first ancestor with the "nested" class, then doing the comparison with it instead of target:
function findAncestorWithClass(dom, targetClass){
if(!dom){
return; // (undefined)
}
if(dom.classList.contains(targetClass)){
return dom;
}
// terminal recursion
return findAncestorWithClass(dom.parentNode, targetClass);
}
This is naïve shot. You may want to look for a way to make it more efficient, e.g. by avoiding to look for the first ancestor on each .nested div.
See the working snipped below.
var container = document.getElementById("container");
var nested = document.getElementsByClassName("nested");
function outerHandler(e) {
this.classList.add("outer-clicked");
}
function findAncestorWithClass(dom, targetClass){
if(!dom){
return; // (undefined)
}
if(dom.classList.contains(targetClass)){
return dom;
}
// terminal recursion
return findAncestorWithClass(dom.parentNode, targetClass);
}
function nestedHandler(e) {
var nestedParent = findAncestorWithClass(e.target, "nested");
if (this === nestedParent) {
nestedParent.classList.add("nested-clicked");
}
}
container.addEventListener("click", outerHandler, false);
document.body.addEventListener("click", outerHandler, false);
for (var i = 0; i < nested.length; i++) {
nested[i].addEventListener("click", nestedHandler, false);
}
#container {
display: block;
width: 398px;
height: 398px;
padding: 30px;
border: solid 1px #888;
}
#nested1 {
width: 336px;
height: 336px;
padding: 30px;
}
#nested2 {
width: 274px;
height: 274px;
padding: 30px;
}
#nested3 {
width: 212px;
height: 212px;
padding: 30px;
}
#sub-nested {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.nested {
border: solid 1px #888;
}
.nested-clicked {
background-color: red;
}
.outer-clicked {
background-color: green;
}
<div id="container">
<div id="nested1" class="nested">
<div id="nested2" class="nested">
<div id="nested3" class="nested">
<div id="sub-nested"></div>
</div>
</div>
</div>
</div>

how to use same popup jquery for two div

how to use same popup jquery for two div. i have a jquery for the popup and it is div popup and i want to use the same jquery for another div. please help. the code is given below
<head>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style>
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}</style>
</head>
<body>
<div id="ack" class="topopup">Location</div>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content" width="400px" height="500px">
<input type="text" name="mm" id="id">
<button id="ok">ok</button>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
jquery for popup. i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$("button#ok").click(function() {
disablePopup();
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
i want use this jquery for another div. but i given the same name for another div but i when click that link it displays previous div

you never used a <a class="topopup1"></a>?

My suggestiong is that a target attribute can be added to <a> to imply which div will be poped up.
for example:
html code
<a class="popup-button" target="#p1"></a>
<a class="popup-button" target="#p2"></a>
<div class="toPopup" id="p1">...</div>
<div class="toPopup" id="p2">...</div>
js code
$(".popup-button").click(function{
loading($(this).attr("target")); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup($(this).attr("target")); // function show popup
}, 500); // .5 second
});
function loading(selector) {
$(selector).show();
}
function loadPopup(selector) {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$(selector).fadeIn(0500); // fadein popup div
popupStatus = 1; // and set value to 1
}
}

Use class name with your anchor tags
<a class='topopup1'>Show Popup</a>