title: How to reference the clicked legend item in highcharts?
body: <p>I am using Highcharts JS for a project and I can't figure out how to reference the clicked legend item. I want to toggle a class to the legend item clicked so I can add different styles to active/disabled legend items.</p>
  
  <p>When I use the  legedItemClick event I see the console log fired but I can not find children. (probably because this referres to the series and not the legend item). Example:</p>
  
  <pre><code>plotOptions:{
      line:{
          marker:{
              symbol:'circle',
              enabled: false
          },
          events: {
              legendItemClick: function () {
                  $(this).addClass('new_class');
                  console.log('click click');
                  $(this).find('.legend-name').toggleClass('visible_true').toggleClass('visible_false');
                  $(this).find('.legend-icon').toggleClass('visible_true').toggleClass('visible_false');
              }
          },
          showCheckbox: false
      }
  },
  </code></pre>
  
  <p>When I'm trying to not use highcharts click event but use jQuery click handlers on a span inside the legend item instead nothing happens, not even a console log will fire. This probably because of the default click handler of highcharts preventing bubbling or something. Example:</p>
  
  <pre><code>$('body').delegate('.highcharts-legend-item span', 'click', function(){
  
      console.log('click');
  
      $(this).find('.legend-name').toggleClass('visible_true');
      $(this).find('.legend-icon').toggleClass('visible_true');
  });
  </code></pre>