event listener firing on element not attached

Question

I attached click event listener to my search button, (and no event is attached to element with id 'username') however when I click on the text field the click event is also fired. No matter on which of the two I click the event gets fired anyways! Can anybody explain me why

var e;
 var m;
 var h;
 var c;
 
        u = document.getElementById('username');       
        s = document.getElementById('search');
  c = document.getElementById('output');
  s.addEventListener('click', function(e){
   c.innerHTML = this.id;
  });

#reset-password,
#find-account{
 width: 500px;
 height: auto;
 
 margin: 0px auto;
}
#reset-password > #title{
 color: #A0A0A0;
}
#reset-password > #search-block{
 width: 100%;
 display: block;
 overflow: hidden;
 border: 1px solid blue;
}
#reset-password #search-block #filler{
 display: block;
 overflow: hidden;
}
#reset-password #search-block > #filler > #username{
 width: 96.5%;
}
#reset-password #search-block > #search{
 float: right;
}
#reset-password > #content > #how-to-contact-you,
#reset-password > #content > #attempt-error{
 display: none;
}
#reset-password > #content > #how-to-contact-you > div.via{
 margin: 12.5px 0px;
}
#reset-password > #content > #how-to-contact-you > div.via > label > small{
 font-weight: bold;
}
#reset-password > #content > #how-to-contact-you > div.via > small{
 padding-left: 25px;
}
#reset-password > #content > #how-to-contact-you > #submit{
 display: block;
 margin-left: auto;
}

#reset-password > #content > * > h3{
 display: block;
 position: relative;
 
 padding: 5px 0px;
 
 border-width: 1px; 
 border-color: #C0C0C0;
 border-top-style: solid;
}
#reset-password > #content > * > h3:after{
 display: block;
 content: '\0020';
 position: absolute;
 
 width: 10px;
 height: 10px;
 
 top: -1px;
 left: 50%;
 
 
 border-width: 1px; 
 border-color: #C0C0C0;
 border-style: solid none none solid;
 
 background: #FFFFFF;
 
 -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
   transform: translateY(-50%) rotate(45deg);
}
#reset-password > #content > #how-to-contact-you > h3{
 color: #75B618;
}
#reset-password > #content > #attempt-error > h3{
 color: #FF1504;
}

<body>
 <div class='A4 page content'>
  <div id='reset-password'>
   <big id='title'>Find your account</big>
   <div id='content'>
    <p><small>Enter your email or phone number</small></p>
    <label id='search-block'>
     <button class='im' id='search'>Search</button>
     <span id='filler'><input type='text' class='im' id='username'/></span>
    </label>
    <div id='how-to-contact-you'>
     <h3>Reset Password</h3>
     <h5>Choose an option to reset your password</h5>
     <div class='via'>
      <input class='radio' id='email' name='cell-desktop' type='radio' value='email' checked/>
      <label for='email'><small>Email me</small></label><br/>
      <small>emailusername@domain.com</small>
     </div>
     <div class='via'>
      <input class='radio' id='text' name='cell-desktop' type='radio' value='text'/>
      <label for='text'><small>Text me</small></label><br/>
      <small>xxx-xxx-xxxx</small>
     </div>
     <!-- <input type='submit' class='im' id='submit' value='Submit'/> -->
    </div>
    <div id='attempt-error'>
     <h3>Account could not be found!</h3>
     <p>
      <small>We were unable to find your account using the information you provided!</small>
     </p>
    </div>
                <label id='output'></label>
   </div>
  </div>
 </div>
</body>

I am sorry I don't understand! I have changed the javascript and still does not work! — Gacci, Oct 02 '15 at 02:42
@Vance I tried again and it does the same thing, no matter which one I click it fires the click event anyhows! — Gacci, Oct 02 '15 at 02:46
That's odd. What is the content of "output" item when search button was clicked and when the searchbox was clicked? — Vance, Oct 02 '15 at 02:50
Someone posted an answer (and deleted it) saying that it was because the content was inside a label tag. I changed the label tag for a div and it solved the problem. Whoever answered this deserves the credit! — Gacci, Oct 02 '15 at 02:51

score 0 · Accepted Answer · answered Oct 02 '15 at 03:16

0

The search button and search box is placed inside a label element [id="search-block"], hence this is happening. Can you move the button and box out of the label element?

answered Oct 02 '15 at 03:16

Rejoy

327
3
9

score 0 · Answer 2 · answered Oct 02 '15 at 03:20

var e;
 var m;
 var h;
 var c;
 
        u = document.getElementById('username');       
        s = document.getElementById('search');
  c = document.getElementById('output');
  s.addEventListener('click', function(e){
   c.innerHTML = this.id;
  });

#reset-password,
#find-account{
 width: 500px;
 height: auto;
 
 margin: 0px auto;
}
#reset-password > #title{
 color: #A0A0A0;
}
#reset-password > #search-block{
 width: 100%;
 display: block;
 overflow: hidden;
 border: 1px solid blue;
}
#reset-password #search-block #filler{
 display: block;
 overflow: hidden;
}
#reset-password #search-block > #filler > #username{
 width: 96.5%;
}
#reset-password #search-block > #search{
 float: right;
}
#reset-password > #content > #how-to-contact-you,
#reset-password > #content > #attempt-error{
 display: none;
}
#reset-password > #content > #how-to-contact-you > div.via{
 margin: 12.5px 0px;
}
#reset-password > #content > #how-to-contact-you > div.via > label > small{
 font-weight: bold;
}
#reset-password > #content > #how-to-contact-you > div.via > small{
 padding-left: 25px;
}
#reset-password > #content > #how-to-contact-you > #submit{
 display: block;
 margin-left: auto;
}

#reset-password > #content > * > h3{
 display: block;
 position: relative;
 
 padding: 5px 0px;
 
 border-width: 1px; 
 border-color: #C0C0C0;
 border-top-style: solid;
}
#reset-password > #content > * > h3:after{
 display: block;
 content: '\0020';
 position: absolute;
 
 width: 10px;
 height: 10px;
 
 top: -1px;
 left: 50%;
 
 
 border-width: 1px; 
 border-color: #C0C0C0;
 border-style: solid none none solid;
 
 background: #FFFFFF;
 
 -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
   transform: translateY(-50%) rotate(45deg);
}
#reset-password > #content > #how-to-contact-you > h3{
 color: #75B618;
}
#reset-password > #content > #attempt-error > h3{
 color: #FF1504;
}

<body>
 <div class='A4 page content'>
  <div id='reset-password'>
   <big id='title'>Find your account</big>
   <div id='content'>
    <p><small>Enter your email or phone number</small></p>
    <div id='search-block'>

     <button class='im' id='search'>Search</button>
     <span id='filler'><input type='text' class='im' id='username'/></span></div>
    
    <div id='how-to-contact-you'>
     <h3>Reset Password</h3>
     <h5>Choose an option to reset your password</h5>
     <div class='via'>
      <input class='radio' id='email' name='cell-desktop' type='radio' value='email' checked/>
      <label for='email'><small>Email me</small></label><br/>
      <small>emailusername@domain.com</small>
     </div>
     <div class='via'>
      <input class='radio' id='text' name='cell-desktop' type='radio' value='text'/>
      <label for='text'><small>Text me</small></label><br/>
      <small>xxx-xxx-xxxx</small>
     </div>
     <!-- <input type='submit' class='im' id='submit' value='Submit'/> -->
    </div>
    <div id='attempt-error'>
     <h3>Account could not be found!</h3>
     <p>
      <small>We were unable to find your account using the information you provided!</small>
     </p>
    </div>
                <label id='output'></label>
   </div>
  </div>
 </div>
</body>

I have converted the label to div to keep the alignment.

event listener firing on element not attached

2 Answers2