jQuery - Click registered twice

Question

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.

When are you running this block of code? Is this particular block of code running more than once? Try adding a `console.log` before you add your click handlers. — Mike Cluck, Aug 19 '16 at 17:45
Impossible to answer without the full context. I am willing to bet that you are binding the events multiple times. — epascarello, Aug 19 '16 at 17:47
@MikeC I put it in right about `$("#uploadImg")` and it's not registering?? — Toni Au, Aug 19 '16 at 17:50
Possible duplicate of [click() event is calling twice in jquery](http://stackoverflow.com/questions/6731894/click-event-is-calling-twice-in-jquery) — Edison Biba, Aug 19 '16 at 18:49
@edisoni.1337 I've looked through probably 15 click event called twice posts and tried all the solutions and none worked for me. I only have one script, tried `unbind`, tried `e.preventDefault();` and `e.stopPropagation();`, etc. — Toni Au, Aug 19 '16 at 19:07
I just ran your snippet and none of the event handlers are running twice. — Mike Cluck, Aug 19 '16 at 19:23
@ToniAu but again it's duplicated question i think. You can try my jsfiddle in my answer now :) — Edison Biba, Aug 19 '16 at 19:49

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Parithiban · Answer 2 · 2016-08-19T19:11:11.200

-1

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.");
      });

edited Aug 19 '16 at 19:11

answered Aug 19 '16 at 18:06

Parithiban

1,656
11
16

I have updated the code check with this.It will work fine – Parithiban Aug 19 '16 at 19:31

jQuery - Click registered twice

2 Answers2