Question

我正在尝试绑定一个span元素来滚动幻灯片（特别是rcarousel插件）。这是javascript代码：

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

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

现在，此代码位于document.ready函数内，前进按钮$（“。forward”）可以正常滚动幻灯片，但它就像浏览器完全忽略了倒带按钮。没有错误的chrome devtools控制台抛出;如果我在控制台中粘贴相同的代码.rewind开始神奇地工作。

有谁知道那里会发生什么样的巫术？

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

Answer 1

旋转木马按钮由轮播动态更改，因此您需要使用委托的事件处理程序，附加到不变的祖先（document是默认的，更接近是方便的）：

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

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

委托事件通过监听事件冒泡到一个不变的祖先，然后然后应用jQuery选择器然后将该函数应用于任何被点击的元素< em>导致事件。这意味着元素只需要在事件时匹配，而不是*事件注册时间。

注意：请勿将委派的事件处理程序连接到'body'，因为样式可能导致正文高度为零而不响应冒泡的鼠标事件。

绑定.click（function（）{...}）的对象;对点击没有影响

1 个答案: