Drongo_III Posted December 17, 2012 Share Posted December 17, 2012 Hi Guys Having an issue with jquery that I've never had before. It was my expectation that with the code below (stripped down the code for this example) if you click the div with the ID '#popUp' the click function will run. What I dont understand is why when you click anything in the div (as the link or the image) the click function also runs. That's never happened before so I am really confused. Using jquery 1.8.2 Can anyone point out what I've done wrong? Mighty confused and been staring at this particular website for quite some hours so probably missing something obvious :/ Any help would be very welcome. Thanks, Drongo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript" src="jquery182.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#popUp').click(function(){ $('#popUp').fadeOut(600, function(){ $('#popUp img').remove(); $('#blackout').css('display','none'); }); }); }); </script> <style> #popUp{ position: absolute; z-index: 601; padding: 20px; margin-left: 300px; background-color: #000; } .close{ position: absolute; z-index: 630; right: 20px; bottom: 1px; color: #fff; } </style> </head> <body> <div id="popUp"> <img src="https://www.google.co.uk/images/srpr/logo3w.png"/> <a href="#" class="close" >Close</a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
MDCode Posted December 17, 2012 Share Posted December 17, 2012 The way you have it set up, if you click anything in the div it will be executed, you have done nothing wrong. Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted December 17, 2012 Author Share Posted December 17, 2012 Hi That's not how I intended it to work though :/ Why would it target everything in the div? Since the selector is for '#popUp' - doesn't that mean the click function should only fire on clicking the div with that ID? I guess what I am saying is, why would the child elements active the click function when they aren't part of the selector? The way you have it set up, if you click anything in the div it will be executed, you have done nothing wrong. Quote Link to comment Share on other sites More sharing options...
MDCode Posted December 17, 2012 Share Posted December 17, 2012 (edited) I'm not quite following you. In your code there is only one div. If you have multiple divs like... <div id="popUp">This works</div> <div id="popDown">This works too</div> Well...that shouldn't be happening and it won't help if you don't show everything The whole jquery command relies on everything inside the div tag. So your background, image, and link that are inside that div will all work to execute your command Edited December 17, 2012 by SocialCloud Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted December 17, 2012 Author Share Posted December 17, 2012 The code here is stripped down but it's got the issue I am talking about. Let me explain this more clearly. The div with the id '#popUp' has inside it a link and an image. My expectation from the code is that if you click the div with the ID '#popUp' the click function will fire. But I don't understand why if you click the link for 'close', the click funciton also fires. This is what doesn't make sense to me. The selector is surely the div and not the child elements within the div. OR is that the way the selector works? Am i misunderstanding something? I'm not quite following you. In your code there is only one div. If you have multiple divs like... <div id="popUp">This works</div> <div id="popDown">This works too</div> Well...that shouldn't be happening and it won't help if you don't show everything Quote Link to comment Share on other sites More sharing options...
MDCode Posted December 17, 2012 Share Posted December 17, 2012 <div id="popUp"> <img src="https://www.google.co.uk/images/srpr/logo3w.png"/> <a href="#" class="close" >Close</a> </div> Everything inside the div will work. If you were to move your close to outside of the </div> tag then the jquery click function would not work when close is clicked. Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted December 17, 2012 Author Share Posted December 17, 2012 haha sorry, maybe I'm not explaining this. What I dont understand is why the child elements activate the click function. Doesn't the selector only target the selector element? Quote Link to comment Share on other sites More sharing options...
MDCode Posted December 17, 2012 Share Posted December 17, 2012 You confuse me. Or maybe I confuse myself. If you mean it is only supposed to work for the div id of popUp then yes. Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted December 17, 2012 Author Share Posted December 17, 2012 Yes but in the example if I click the div with ID '#popUp' the click function fires. But if I click the 'close' link, the click function also fires. This is the bit I don't understand. surely the click function should only fire when you click the div and not the link? You confuse me. Or maybe I confuse myself. If you mean it is only supposed to work for the div id of popUp then yes. Quote Link to comment Share on other sites More sharing options...
Christian F. Posted December 17, 2012 Share Posted December 17, 2012 Events bubble up the layers, so when you click on a child element the click will bubble up unless prevented. Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted December 17, 2012 Author Share Posted December 17, 2012 Thanks Christian As long as I know this is normal behaviour. Incidentally is 'bubble up' the technical term Drongo Events bubble up the layers, so when you click on a child element the click will bubble up unless prevented. Quote Link to comment Share on other sites More sharing options...
Christian F. Posted December 17, 2012 Share Posted December 17, 2012 Hehe, believe it or not, but it is. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.