bxslider can't use jQuery functions in navigation

I'm trying to call a jQuery click function at the navigation of my bxslider like the following:

$("a.bx-next").click(function(){
    alert("works!");
});

the problem is, that somehow i can't access anything that is in the .bx-controls section... if i try to:

$(".bx-viewport li").click(function(){
    alert("works!");
});

it works as expected...

is there anyone, who experienced the same or knows, what the problem could be?

thanks in advance :)

EDIT

Actually i am using Drupal and the views slideshow plugin to include the bxslider... i don't know, what impact that could have, but these are the options given in JSON:

"viewsSlideshowBxslider": {
    "views_slideshow_bxslider_images_1": {
        "general": {
            "mode": "horizontal",
            "speed": 500,
            "slideMargin": 0,
            "startSlide": 0,
            "randomStart": 0,
            "infiniteLoop": 1,
            "hideControlOnEnd": 0,
            "captions": 1,
            "ticker": 0,
            "tickerHover": 0,
            "adaptiveHeight": 0,
            "adaptiveHeightSpeed": 500,
            "video": 0,
            "touchEnabled": 1,
            "preloadImages": "all",
            "disable_standard_css": 0,
            "useCSS": 1,
            "align_image": "left",
            "align_caption": "left",
            "swipeThreshold": 50,
            "oneToOneTouch": 1,
            "preventDefaultSwipeX": 1,
            "preventDefaultSwipeY": 0,
            "color_caption": "80, 80, 80, 0.75"
        },
        "controlsfieldset": {
            "controls": 1,
            "nextText": "",
            "prevText": "",
            "startText": "",
            "stopText": "",
            "autoControls": 0,
            "autoControlsCombine": 0
        },
        "pagerfieldset": {
            "pager": 1,
            "pagerType": "full",
            "pagerShortSeparator": " \/ "
        },
        "autofieldset": {
            "pause": 4000,
            "autoStart": 1,
            "auto": 0,
            "autoHover": 0,
            "autoDelay": 0,
            "autoDirection": "next"
        },
        "carousel": {
            "minSlides": 4,
            "maxSlides": 6,
            "moveSlides": 1,
            "slideWidth": 0
        },
        "callback": [

        ],
        "fixes": {
            "height_does_not_dyn_change": 0
        }
    }
}

Solution

okay, i found it on my own...

i'm not sure if it didn't work, because of the implementation via Drupal.

I had to define custom navigation like

<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>

and then in a custom js file

$('.bxslider').bxSlider({
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    nextText: 'Onward →',
    prevText: '← Go back',
    onSlideNext: function(){
        handleBxNav("next");
    },
    onSlidePrev: function(){
        handleBxNav("prev");
    }
});

function handleBxNav(direction){
    if(direction == "prev"){
        console.log("prev");
    }else{
        console.log("next");
    }
}

with this solution, i can add custom events to the navigation :)

hope it helps if anyone is running in the same issue