我正在尝试将滚动幻灯片的函数绑定(bind)到 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 函数中还有其他绑定(bind),每个都完美地工作
最佳答案
轮播按钮由轮播动态更改,因此您需要使用委托(delegate)事件处理程序,附加到不变的祖先(document
是默认值,没有更接近的东西很方便):
$(document).on('click', '.forward', function() {
$("#carousel").rcarousel("next");
});
$(document).on('click', '.rewind', function() {
$("#carousel").rcarousel("goToPage", 0);
});
委托(delegate)事件的工作方式是监听事件冒泡到不变的祖先,然后应用 jQuery 选择器,然后将函数应用于任何单击的元素< em>导致该事件的原因。这意味着元素只需要在事件时间匹配,而不是*事件注册时间)。
注意:请勿将委托(delegate)事件处理程序连接到'body'
,因为样式可能会导致 body 高度为零且不响应冒泡鼠标事件。
关于javascript - 与 .click(function() {...}) 绑定(bind)的对象;对点击没有影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14789493/