javascript - 与 .click(function() {...}) 绑定(bind)的对象;对点击没有影响

标签 javascript jquery jquery-selectors onclick

我正在尝试将滚动幻灯片的函数绑定(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/

相关文章:

javascript - prettyPhoto灯箱社交工具: all images have the same number of Facebook likes

javascript - 如何停止加载某些 javascript 文件?

javascript - 使用 .html() 仅从内容中取出特定元素

javascript - 为单个父单击显示/隐藏多个子类(Jquery)

javascript - 中午 12 点范围 slider 后的 noUISlider 时间

javascript - 为什么 Strophe.js 没有抛出错误?

javascript - getRangeAt(0) 返回带有 parentNode 文档片段的#text 节点

JQuery $this 选择器 - 如何使其工作

javascript - jQuery 选择多个 :nth-child()

javascript - 自定义 jQuery 选择器返回所有元素的匹配项