CODEWITHSUNDEEP
javascriptjquery
jilseego
jilseego

Reputation: 1103

Execute an event when everything is clicked except one element?

'<div class="lightbox-con">
     <div class="lightbox-shade"></div>
     <span class="logo"></span>
     <div class="controls">
         <span class="arrow back"></span><span class="close"></span><span class="arrow forward"></span>
     </div>
     <div class="caption">
         <p class="caption-text"></p>
         <span class="logo2" ></span>
      </div>
  </div>'

The markup above is a lightbox. Given it's already in an overly state, how do I close/remove it when everything is clicked except the .arrow elements? I tried so many ways and one of them is this:

$(':not(.arrow)').click(function(){
   $('.lightbox-con').remove();
});

The code above won't even allow the lightbox to launch :-\

Upvotes: 0

Views: 110

Answers (3)

Henry
Henry

Reputation: 2187

You can use event.stopPropagation() as long as its not a .live event. Live events do not allow for stopping propagation, if you need to use a live event there are other ways around it, just let me know if thats a requirement. Example:

http://jsfiddle.net/HenryGarle/y2LwH/2/

$('.lightbox-con').click(function(){
   $('.lightbox-con').remove();
});

$('.arrow', '.lightbox-con').click(function (e) {
    e.stopPropagation();
});

Upvotes: 1

chchrist
chchrist

Reputation: 19822

This solution uses one click event http://jsfiddle.net/VKBdV/

$('.lightbox-con').click(function(e){
  var $target = $(e.target);
    if($target.hasClass("arrow")) {
        event.stopPropagation();
    } else {
         $(this).remove(); 
    }
});

Upvotes: 2

Senad Meškin
Senad Meškin

Reputation: 13756

$('.lightbox-con').click(function(){
  //your code to close it
});
$('.arrow').click(function(event){

 //your code for moving forward back
event.stopPropagation(); //this will do the trick, it wil just execute arrow code and stop others
})

I hope this helps

Upvotes: 1

Related Questions