javascript - 寻呼机区域内的Jquery Cycle2链接不起作用

Question

我有一个使用 cycle2 插件的设置，但是寻呼机区域内的链接不起作用，除非您右键单击它并“在新窗口中打开”。建议？

<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=50000 data-cycle-pager="#no-template-pager" data-cycle-slides="div" data-cycle-pager-template="">
<div id="tab1"><h1>Test Slide One</h1></div>
<div id="tab2"><h1>Test Slide Two</h1></div>
<div id="tab3"><h1>Test Side Three</h1></div>
<div id="tab4"><h1>Test Slide Four</h1></div> 
</div>
<div id="no-template-pager">
<div class="tab1"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab2"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab3"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>

<div class="tab4"><p>Lorem ipsum dolor sit amet.</p><p><a href="http://www.google.com">Test Link</a></p> </div>
</div>

查看fiddle，注意单击寻呼机区域中的链接不会执行任何操作，但如果您右键单击它，链接会打开。

Answer 1

我也在使用cycle2并且遇到了同样的问题，但是添加data-cyle-pager-eventbubble =“true”或者在我的情况下pagerEventBubble：true。它冒泡事件单击 DOM 允许查看和执行 href。

我正在使用 jquery 1.9.1，代码是：

$(document).ready(function(){
$('.banner-imagem').cycle({
    slides: "li",
    timeout: 0,
    fx: "fadeout",
    speed: 400,
    manualFx: "scrollHorz",
    manualSpeed: 400,
    pager: "#banner-nav",
    pagerTemplate: "#per-slide-template",
    loader: "wait",
    log: false,
    pagerActiveClass: "slide-ativo",
    slideActiveClass: "slide-ativo",
    slideClass: "slide-imagem",
    pagerEventBubble: true
});

});

Answer 2

单击时可以在链接上使用 stopPropagation，如下所示：

jQuery(document).ready(function(){
    $('#no-template-pager a').click(function (event) {
        event.stopPropagation();
    });
});