jQuery UI Layout - Function on hide/show pane

Question

I'm trying to trigger a function when I toggle a pane.

I cannot find a way to "listen" to on click method of these little buttons (red circles of the picture). This is what I tried for the west button:

$('.ui-layout-toggler.ui-layout-toggler-west.ui-layout-toggler-open.ui-layout-toggler-west-open').click(function(){
    alert('test');
});

But when I click it, my alert doesn't pop up (but the pane hides/shows). Using F12 I have this html:

<div id="" class="ui-layout-toggler ui-layout-toggler-west ui-layout-toggler-open ui-layout-toggler-west-open" title="Fechar" style="position: absolute; display: block; padding: 0px; margin: 0px; overflow: hidden; text-align: center; font-size: 1px; cursor: pointer; z-index: 1; visibility: visible; height: 48px; width: 6px; top: 174px; left: 0px;"></div>

Answer 1

try:

$('body').on('mousedown', '.ui-layout-toggler', function(){
    console.log('test');
});

It seems there is another another event handler that is either interfering/taking precedence or even possibly using event.stopPropagation() that's causing the on.('click') not to work. one way around this is to capture the mousedown event, this should work for whatever you're trying to do after the user clicks the toggle button....

to catch the arrow + ctrl key use this code:

        var arrow = {
            left: 37,
            up: 38,
            right: 39,
            down: 40
           },

        ctrl = 17;

        $(document).on("keydown", function (event) {
            if (event.ctrlKey && event.which === arrow.left) {
                console.log("You pressed left, and control.");
            }
        });

i got this code from this SO post: How to do something if the user presses two keys in javascript

here is the new fiddle: http://jsfiddle.net/zUrpz/4/