Tutorial :Jquery .Click applies to all sub divs?



Question:

HTML:

<div id="lowerLayer">      <div id="positionLayer">          <div id="imageLayer">              <div id="imageHolder" style="background-image: url('/Images/Loading/ajax-loader.gif');">                </div>          </div>      </div>  </div>  

CSS:

#lowerLayer  {      position: fixed;      top: 0px;      left: 0px;      right: 0px;      bottom: 0px;      width: 100%;      height: 100%;      background-color: Green;      cursor: help;  }  #positionLayer  {      position: relative;      margin-top: 80px;      width: 100%;      background-color: Red;  }  #imageLayer  {      position: relative;      width: 450px;      height: 400px;      margin: auto;      background-color: Blue;      background-image: url('../Images/Large-image-holder.png');  }  #imageHolder  {      position: absolute;      left: 25px;      top: 25px;      width: 400px;      height: 300px;      line-height: 300px;      background-position: center;      background-repeat: no-repeat;      background-color: Aqua;  }  

JQuery:

$(document).ready(function() {          $("#lowerLayer").click(function() {              $(this).fadeTo("fast", 0, function() {                  $(this).hide(0);              });          });      });  });  

Edit:

the problem im having us that the click event seems to be applied to all sub divs i just want it to apply to "#lowerLayer"


Solution:1

I think this will solve your problem:

$(document).ready(function() {          $("#lowerLayer").click(function(e) {                // Return if it's a child that's clicked:              if (e.target !== this) {return;}                // Otherwise continue:              $(this).fadeTo("fast", 0, function() {                  $(this).hide(0);              });            });      });  });  


Solution:2

Leaving event delegation and bubbling aside, since I don't think it is relevant to the actual problem here.

The jQuery hide() method applies display: none to the styles for an element. If an element is not displayed, then none of its descendants are either. Likewise, fadeTo() reduces the opacity, which also has an effect on the descendents of an element.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »