I have a list o elements li that bees my image carousel. Each element is a thumbnail, and it bees clickable using jQuery because i needed to put the image as li background-image. This I can not change. When thumb click, it calls a lightbox to show the image passed as bg parameter.

<ul id="piclist">
    <li class="box" style="background-image: url('url_1');"><i class="seq" id="1"></i></li>
    <li class="box" style="background-image: url('url_2');"></li>
    <li class="box" style="background-image: url('url_3');"><i class="seq" id="2"></i></li>
    <li class="box" style="background-image: url('url_4');"></li>
</lu>

The piece of my jQuery code to do this is:

<script type="text/javascript">
    $('.box').click(function() {
        return $(this).ekkoLightbox();
    });
</script>

IT WORKS! But in some special cases, the thumbnail must show a kind of button, so I used a positioned <i></i> because of the Font Awesome im using in the project.

The image bellow can illustrate what im talking about:

THE PROBLEM IS:

When the li loads an i element, it also must be clickable, and its link must override his parents link - the container.

I did a piece of code in jQuery to do this, but always when I click on the i element button, the action loads the image lightbox from the li. Its wrong. It should do another action, for example, open an URL in new window, load another modal, whatelse.

<script type="text/javascript">
    $('.box').click(function() {
        return $(this).ekkoLightbox();
    });
    $('.seq').click(function() {
        console.log($(this).attr("id")); //IT WORKS!
            *do other action...* //Doesn´t work, open the <li> lightbox!
    });
</script>

Any Help? :)

I have a list o elements li that bees my image carousel. Each element is a thumbnail, and it bees clickable using jQuery because i needed to put the image as li background-image. This I can not change. When thumb click, it calls a lightbox to show the image passed as bg parameter.

<ul id="piclist">
    <li class="box" style="background-image: url('url_1');"><i class="seq" id="1"></i></li>
    <li class="box" style="background-image: url('url_2');"></li>
    <li class="box" style="background-image: url('url_3');"><i class="seq" id="2"></i></li>
    <li class="box" style="background-image: url('url_4');"></li>
</lu>

The piece of my jQuery code to do this is:

<script type="text/javascript">
    $('.box').click(function() {
        return $(this).ekkoLightbox();
    });
</script>

IT WORKS! But in some special cases, the thumbnail must show a kind of button, so I used a positioned <i></i> because of the Font Awesome im using in the project.

The image bellow can illustrate what im talking about:

THE PROBLEM IS:

When the li loads an i element, it also must be clickable, and its link must override his parents link - the container.

I did a piece of code in jQuery to do this, but always when I click on the i element button, the action loads the image lightbox from the li. Its wrong. It should do another action, for example, open an URL in new window, load another modal, whatelse.

<script type="text/javascript">
    $('.box').click(function() {
        return $(this).ekkoLightbox();
    });
    $('.seq').click(function() {
        console.log($(this).attr("id")); //IT WORKS!
            *do other action...* //Doesn´t work, open the <li> lightbox!
    });
</script>

Any Help? :)

• javascript
• jquery
• html
• css
• twitter-bootstrap

2 Answers 2

Change the $('.seq') click to this:

$('.seq').click(function(ev) {
   ev.stopPropagation();

   console.log($(this).attr("id")); //IT WORKS!
   *do other action...* //Doesn´t work, open the <li> lightbox!
 });

This will prevent the click event from bubbling up an triggering the click even of the i's parent (the li). Notice I added the event object as an argument and I'm calling the stopPropagation (http://api.jquery./event.stoppropagation/) method before doing anything else.

Check if e.target is identical to this:

<script type="text/javascript">
    $('.box').click(function(e) {
        if( e.target !== this )  return;
        return $(this).ekkoLightbox();
    });
    $('.seq').click(function() {
        console.log($(this).attr("id")); //IT WORKS!
        *do other action...* 
    });
</script>