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函数

修改

1 个答案: