call function onclick highchart

Question

here's the fiddle .

I'm trying to be able to click anywhere on the chart to call a function (I haven't put it in the fiddle, it's not useful here).The idea is to be able to select a graph among the other.

The example just change the color of the border of the div to black, and if you click on another one, it goes to grey. Currently, if you are clicking on the background, on the series, or on the rest of the div it is working (test it on the fiddle). Here's the related code :

For the background :

events: {
    click: function(event) {
        var tile = $(this.container);
        while (!tile.parent().hasClass("tile")){
            tile = tile.parent();
        }
        highlightElem(tile);
    }
},

For the series :

series: {
    events: {
        click: function(event) {
            var tile = $(this.chart.container);
            while (!tile.parent().hasClass("tile")){
                tile = tile.parent();
            }
            highlightElem(tile);
        }
    }
}

For the rest of the div :

$(".tile").children().click(function(){
    highlightElem($(this));
});

But it is not working on axis, title and marging.

If anyone has an idea to fix it.

Answer 1

I have tried using ".tile div" instead ".tile" in calling func "highlightElem" .

 $(".tile div").on('click',function(){
    highlightElem($(this));
});

Also In "highlightElem" updated the code with "closest()"

function highlightElem(elem) {
if (oldElem !== null) {
    oldElem.closest('.widget').css("border-color", "#ccc");
}
elem.closest('.widget').css("border-color", "black");
oldElem = elem;

}

http://jsfiddle.net/vchbg/24/