Javascript bxslider can'；不要在导航中使用jQuery函数

我尝试在bxslider的导航处调用jQuery click函数，如下所示：

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

问题是，不知何故，我无法访问

.bx controls

部分中的任何内容。。。如果我尝试：

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

它按预期工作

有没有人经历过同样的事情，或者知道问题出在哪里

提前感谢：）

编辑 实际上，我正在使用Drupal和views slideshow插件来包含bxslider。。。我不知道这会有什么影响，但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
        }
    }
}

---

好吧，我自己找到的

我不确定它是否起作用，因为它是通过Drupal实现的

我必须定义自定义导航，比如

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

使用此解决方案，我可以将自定义事件添加到导航：）

---

如果有人在同一问题上运行，希望它能有所帮助

显示bxslider设置。

$('.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");
    }
}