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

时间:2013-02-09 15:15:30

标签: javascript jquery jquery-selectors onclick

我正在尝试绑定一个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函数中还有其他绑定,每个绑定都完美无缺

1 个答案:

答案 0 :(得分:1)

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

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

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

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

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