bxslider 无法在导航中使用 jQuery 功能

Question

我正在尝试在我的 bxslider 导航中调用 jQuery 点击功能，如下所示：

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

问题是，我无法访问 .bx-controls 部分中的任何内容...如果我尝试：

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

它按预期工作...

有没有人有过同样的经历或者知道是什么问题？

提前致谢:)

编辑

实际上我正在使用 Drupal 和视图幻灯片插件来包含 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
        }
    }
}

Answer 1

好的，我自己找的...

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

我必须像

这样定义自定义导航

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

然后在自定义 js 文件中

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

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

如果有人运行遇到同样的问题

，希望对您有所帮助

bxslider 无法在导航中使用 jQuery 功能

bxslider can't use jQuery functions in navigation

javascript

jquery

bxslider

编辑