jquery - Cycle2 初始化事件未触发

Question

我使用 Cycle2 作为基本的轮播。我的幻灯片项目有时在其数据中包含一个 url，因此我必须使用 Cycle2 api 事件来使用该 url。

我的问题是，虽然“cycle-after”事件触发正常，但没有任何初始化事件触发。因此，如果我的第一张幻灯片有一个网址，则不会发生任何事情。这是我的代码:

pressSlideshow.on({
'cycle-post-initialize': function(event) {
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
},
'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var a = $(incomingSlideEl);
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
}
});

第一个事件永远不会触发，但当我滚动幻灯片时，“循环后”事件工作正常。我还尝试了从未触发的“cycle-initialized”事件，以及仅在滚动后触发但不在初始化时触发的“cycle-update-view”事件。

什么给了？提前致谢:}

Cycle2 Events Documentation

Answer 1

我也遇到了同样的问题。

来自FAQ

Why doesn't the cycle-initialized event fire?

It does, I promise. But if you bind your event listener after it has already fired then you won't hear it. Double check that you're not binding too late.

您必须在运行cycle() init 方法之前绑定(bind)事件。

假设您的代码设置如下:

var pressSlideshow = $('.pressSlideshow').cycle();

pressSlideshow.on({
'cycle-post-initialize': function(event) {
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
},
'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    var a = $(incomingSlideEl);
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
}
});

这样做:

$(document).on('cycle-post-initialize', '.pressSlideshow', function(){
    console.log('call');
    var a = $('img.cycle-slide-active');
    var d = a.data('url');
    if (d !== undefined) {
        pressLink.attr('href', a.data('url')).show();
    } else {
        pressLink.hide();
    }
});

var pressSlideshow = $('.pressSlideshow').cycle();

pressSlideshow.on({
    'cycle-after': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        var a = $(incomingSlideEl);
        var d = a.data('url');
        if (d !== undefined) {
            pressLink.attr('href', a.data('url')).show();
        } else {
            pressLink.hide();
        }
    }
});

记下 .pressSlideshow 选择器，因为您的选择器可能会有所不同。

干杯