0

First of all my code can be found here in total.

http://jsfiddle.net/yfukm8kh/1/

The part I'm having problems with is the following.

var changePic = function (direction, id, array) {

    var intID = parseInt(id);
    var intDir = parseInt(direction);
    if (intID > 0) {
        intID = intID + intDir;
        currentID = intID;
        alert(array[intID].link);
        $('#lightbox').css("background-image", array[intID].link);
    } else if (intID == 0 && intDir == 1) {
        intID = intID + intDir;
        currentID = intID;
        alert(array[intID].link);
        $('#lightbox').css("background-image", array[intID].link);
    }
};

What I want this function to do is changing the background-image of the div id=lightbox to one with the URL in the array I'm giving the function.

However when I click on the sidebars the whole <div id=lightbox>is removed again as if I had clicked on the div itself() and not on the sidebar. However if I put an alert inside the function it shows that the event was triggered and at least some code inside the function was executed.

I'm now assuming that when I click on the sidebar I'm triggering two events, the one that would change the background-image and one that removes the lightbox again.

Is there any way to prevent the underlying div from "listening" to the click?

Also, please correct me if I'm using any terms incorrectly or my posting etiquette is off. I'm new to all of this and would appreciate the input from experienced users.

Thanks a lot.

Joachihm
  • 5
  • 4

3 Answers3

0

you have to stop event propagation using stopPropagation() in the side bar events:

event.stopPropagation():

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Code:

$(document).on('click', '#leftBar', function (event) {
        event.stopPropagation();
        changePic(-1, currentID, activeArray);
    });

    $(document).on('click', '#rightBar', function (event) {
        event.stopPropagation();
        changePic(1, currentID, activeArray);
    });

UPDATED FIDDLE:

http://jsfiddle.net/yfukm8kh/3/

You should read about Event Bubbling and Propagation

Ehsan Sajjad
  • 61,834
  • 16
  • 105
  • 160
0

So you only want to address #lightbox, right? Not what's inside it?
Try this:

$('body > #lightbox').css("background-image", array[intID].link);
Gofilord
  • 6,239
  • 4
  • 27
  • 43
0
  • to prevent triggering click event for #lightbox you can use return false; in right and left bar handlers.
  • I moved #lightbox click handler out of .singapore click handler to prevent miltiple adding of this handler.

Updated fiddle.

$(document).on('click', '#leftBar', function () {
    changePic(-1, currentID, activeArray);
    return false;
});

$(document).on('click', '#rightBar', function () {
    changePic(1, currentID, activeArray);
    return false;
});

$('.singapore').click(function () {
    currentID = event.target.id;
    openThumbnail(singaporeArray, currentID);
});

$(document).on('click', '#lightbox', function () {
    $(this).remove();
});
Regent
  • 5,142
  • 3
  • 21
  • 35
  • Thank you very much. I tried it and it worked. Would you mind explaining to me why this works? I have an idea but I'm not sure if it works the way I think it does. Also thanks for the hint regarding the `#lightbox` click handler. I also implemented that. – Joachihm Aug 20 '14 at 09:38
  • @Joachihm take a look at most popular answer in [this question](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false). In shortly, `return false;` in jQuery event handler prevents calling other handlers in chain. So event handler for `'#lightbox'` will not be called after `'#rightBar'` one. – Regent Aug 20 '14 at 09:48
  • Thanks again. Very interesting read. It's pretty much what I had guessed. – Joachihm Aug 20 '14 at 09:51