Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Liam Maclachlan
Liam Maclachlan
22,805 Points
Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Why does my onclick event not fire on chrome?

I'm using a dropdown menu to fire a bootstrap.js slider change. It works fine in IE(!) and Firefox.. but not Chrome... Any ideas as to why and how to resolve this?

      <select class="category-dropdown">
        <option data-target="#myCarousel" data-slide-to="0">1</option>
        <option data-target="#myCarousel" data-slide-to="1">2</option>
        <option data-target="#myCarousel" data-slide-to="2">3</option>
        <option data-target="#myCarousel" data-slide-to="3">4</option>
      </select>

        .one('bsTransitionEnd', function () {
          var originalHeight = $('.item.active').height(); // Custom code
          $('.carousel-inner').css('height', originalHeight) // Custom code
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () {
          var newHeight = $('.item.active').height() // Custom code
          $('.carousel-inner').stop().animate({'height': newHeight}, 800) // Custom code
            that.$element.trigger(slidEvent)
          }, 0)
        })

2 Answers

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

It seems it is a shared issue with Chrome and Safari.

They don't trigger an onClick event on the click of an option. Radio button are fine... even a 'p' tag is fine... but not the 'options' elelment.

The workaround below creates a custom dropdown list (barely styled) where the onclick will be handeled by the numbers in the list (p tags)

I have a workaround for cross browser compatability. See below of follow the code pen :) http://codepen.io/Limey_88/pen/MwbqLN

HTML

<ul class="category-dropdown">
         <li>Select Option
                  <ul class="category-list">
                           <li>1</li>
                           <li>1</li>
                           <li>1</li>
                           <li>1</li>
                           <li>1</li>
                  </ul>
         </li>          
</ul>

Javascript

$(document).ready(function() {
    $('.category-dropdown').click(function() {
    $('.category-list').show()

    })

    $('.category-dropdown').mouseleave(function() {
        $(this).children(':not("li")').hide()
    })

    $('category-list p').click(function() {
        $(this).siblings().removeClass('item-clicked')
        $(this).addClass('item-clicked')

    })

})

SCSS

@mixin box_shadow($h, $v, $blur, $spread, $rgba) {
  -webkit-box-shadow: $h $v $blur $spread $rgba;
  -moz-box-shadow:    $h $v $blur $spread $rgba; 
  box-shadow:         $h $v $blur $spread $rgba; 
}

* {
   box-sizing: border-box; 
}

.category-dropdown {
    display: inline-block;
    padding: 2px;
    position: relative;
    border: black solid 1px;
   padding: 0;
   margin: 0;
    &:hover {
        @include box_shadow(0px,0px,1px,2px,rgba(0,0,255,0.4));
    }
    > li {
        padding: 5px;
    }
}

.category-list {
   padding: 0;
   border: black 1px solid;
    width: 100%;
    background: white; 
    position: absolute;
    z-index: 2;
    display: none;
   left: 0;
    li {
      list-style: none;
        padding: 3px 5px;
        margin: 0;
        &:hover {
            background: #aaa;
            color: white;
        }   
    }

}
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

Thanks for sharing.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

No problem man :) my pedantry is kicking in and wanting to change it to 'ul' an 'li' tags instead of using 'div' and 'p' tags... :p

EDIT: That's better...

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

I had something like this happen when I had turned off JavaScript in the developers tools and did not get them turned back on. I doubt this is your issue, but maybe. Please share when you figure out what was up. I am curious.