title: why click event not working in legend?
body: <p>could you please tell me why  click event not working in legend.I try to show alert when i click on legend .
  here is my code</p>
  
  <p><a href="http://jsfiddle.net/qhq2ctqr/3/" rel="nofollow noreferrer">http://jsfiddle.net/qhq2ctqr/3/</a></p>
  
  <pre><code>   $(function() {
      $('#container').highcharts({
          chart: {
              type: 'pie'
          },
  
          credits: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
          legend: {
  
              symbolHeight: 1,
              symbolWidth: 1,
              symbolRadius: 0,
              useHTML: true,
              align: 'right',
              verticalAlign: 'top',
              itemWidth: 100,
              layout: 'vertical',
              x: 0,
              y: 100,
              labelFormatter: function() {
  
                  return '&lt;div style="padding:5px;width:55px;background-color:' + this.color + '"&gt;&lt;span style="color: #ffffff;"&gt;' + this.name + ': &lt;b&gt;' + this.y + '&lt;/b&gt; &lt;/span&gt;&lt;/div&gt; &lt;/n&gt;';
              }
          },
          yAxis: {
              title: {
                  text: 'Total percent market share'
              }
          },
          plotOptions: {
              pie: {
                  series: {
                      events: {
                          legendItemClick: function(event) {
                             alert('----')
                          }
                      },
                      states: {
                          hover: {
                              enabled: false
                          }
                      }
                  },
                  allowPointSelect: false,
                  cursor: 'pointer',
                  showInLegend: true,
                  dataLabels: {
                      format: '&lt;b&gt;{point.y}&lt;/b&gt;',
  
                      style: {
                          fontWeight: 'bold',
                          color: 'white'
                      }
                  },
  
                  startAngle: 0,
                  endAngle: 270,
                  center: ['50%', '75%']
              }
          },
          tooltip: {
              enabled: false,
              shadow: false
          },
          series: [{
              states: {
                  hover: {
                      enabled: false
                  }
              },
              showInLegend: false,
              name: 'election result',
              enabled: true,
              dataLabels: {
                  enabled: true
              },
              data: [
                  ['A', 55],
                  ['B', 65],
  
              ],
              size: '30%',
              innerSize: '70%',
          }, {
              states: {
                  hover: {
                      enabled: false
                  }
              },
              name: 'Versions',
              data: [
                  ['sdsd', 55],
                  ['sdf', 65],
                  ['sdf', 65],
                  ['sdf', 132],
  
              ],
              size: '70%',
              innerSize: '80%',
  
          }]
      });
  })
  </code></pre>
  
  <p>;</p>
  
  <p>I tried this code on fiddle but alert is not display ?</p>
  
  <pre><code>  /* $('.test').on('click',function(e){
      alert('---');
      console.log(e)
         console.log($(this))
         $('div.test').css('background-color','red')
      return false;
      }) */
  </code></pre>