0

I have a problem that clicking on a button to show the legend for a Highcharts graph seems to trigger two events: One to turn it on, followed by one to turn it off again. Worked ok for several months, it seems to me. Now suddenly, different behaviour... Could not figure out why it is. Grrr...

This is the HTML part for this example here:

<body>

    <div class="cctabs" style="height: 780px; width: 1135px;">              

            <div id="div_graph" style="width: 1115px; height: 650px;"></div>
            <div style="text-align: right; margin-right: 50px">
                <button id="updateLegend" style="">Show Legend</button><br />
                <button id="showAll" style="margin-top: 5px">Show All</button>&nbsp;<button id="hideAll" >Hide All</button>
            </div>

    </div>

This is the jquery part:

$('#updateLegend').click(function (e)
{
    var legend = chart.legend; 

    alert(legend.display);

    if(legend.display) {
        legend.group.hide();
        $('#updateLegend').html('Show Legend');
        legend.display = false;
    } else {
        legend.group.show();
        $('#updateLegend').html('Hide Legend');
        legend.display = true;
    }
});

When clicking on "Show Legend", it first alerts me that legend is turned off, and turns it on. Correct behaviour. But then suddenly it runs the script again, to turn it off. Why is that?

Thanks for any hints!

luftikus143
  • 1,285
  • 3
  • 27
  • 52

1 Answers1

0

click() event is calling twice in jquery

Check this SO answer.

Try these:

Make sure and check that you have not accidentally included your script twice in your HTML page.

or

Make unbind before the click;

$("#updateLegend").unbind('click');
$("#updateLegend")
.button()
.click(function () {
   // Functionality;
});
Community
  • 1
  • 1
allu
  • 381
  • 1
  • 8