1

我正在尝试将一个函数绑定到一个跨度元素以滚动幻灯片（特别是 rcarousel 插件）。那是javascript代码：

$('.forward').click(function() {
    $("#carousel").rcarousel("next");
});

$('.rewind').click(function() {
    $("#carousel").rcarousel("goToPage", 0);
});

现在，这段代码在 document.ready 函数中，前进按钮 $(".forward") 可以正常工作并成功滚动幻灯片，但就像快退按钮被浏览器完全忽略一样。chrome devtools 控制台没有抛出任何错误；如果我在控制台中粘贴相同的代码，.rewind 就会神奇地开始工作。

有谁知道那里有什么魔法？

PS：在同一个 document.ready 函数中还有其他绑定，每个都完美无缺

4

1 回答 1

1

轮播按钮由轮播动态更改，因此您需要使用委托事件处理程序，附加到不变的祖先（document默认情况下没有更近的方便）：

$(document).on('click', '.forward', function() {
    $("#carousel").rcarousel("next");
});

$(document).on('click', '.rewind', function() {
    $("#carousel").rcarousel("goToPage", 0);
});

委托事件的工作原理是监听事件冒泡到一个不变的祖先，然后应用 jQuery 选择器，然后将函数应用于导致事件的任何单击元素。这意味着元素只需要在事件时间匹配，而不是*事件注册时间）。

注意：不要连接委托的事件处理程序，'body'因为样式会导致主体的高度为零并且不响应冒泡的鼠标事件。

于 2014-11-25T12:14:27.640 回答