jQuery on（）变量作为选择器问题

我无法理解我做错了什么以及为什么这段代码工作得很好：

$(document).on('click', '[data-slider-next]', function() {
    slider('next');
});

这会破坏滑块的行为：

var $slider_next_btn = $('[data-slider-next]');
$(document).on('click', $slider_next_btn, function() {
    slider('next');
});

背景：

• 第一：
• 第二名：

---

←
→
//滑块功能本身。
功能滑块（_方向）{
var$slide=$（“[数据幻灯片]”），
$inactive=$（'[数据幻灯片]：非（[数据幻灯片活动]），
$active=$（“[数据幻灯片][数据幻灯片活动]”）；
if（$active.length==0）var$active=$slide.first（）；
var content=$active.attr（'data-content'）；
//用于加载滑块的函数。
如果（_方向==‘加载’）{
$inactive.hide（）；
$active.show（）
.文本（内容）
.attr（'data-slide-active'，''）；
}
//任何滑块按钮的功能。
否则{
$inactive.hide（）；
//下一个滑块按钮的功能。
如果（_方向==“下一步”）{
var$next=$active.next（“[数据幻灯片]”）。长度？$active.next（“[数据幻灯片]”）
：$slide.first（）；
}
//上一个滑块按钮的功能。
如果（_方向=='prev'）{
var$next=$active.prev（“[数据幻灯片]”）。长度？$active.prev（“[数据幻灯片]”）
：$slide.last（）；
}
//用于任何滑块动作的函数。
$next.show（）
.文本（内容）
.attr（'data-slide-active'，''）；
$active.hide（）.removeAttr（'data-slide-active'）；
}
}
//滑块加载
$（“[data slider next]”）。就绪（函数（）{
滑块（“负载”）；
});
//“下一步”按钮（&N）
var$slider_next_btn=$（“[data slider next]”）；
$（文档）。在（'单击'，$slider\u next\u btn，函数（）上{
滑块（“下一步”）；
});
//&prev。按钮
变量$slider_prev_btn=$（“[data slider prev]”）；
$（文档）。在（'单击'，$slider\u prev\u btn，function（）上{
滑块（'prev'）；
});

来自jQuery的文档：

选择器

类型：字符串 用于筛选触发事件的选定元素的后代的选择器字符串。如果选择器为null或省略，则事件总是在到达选定元素时触发

您正在传递对返回的jQuery对象的引用（带有变量用例）。更新至：

var $slider_next_btn = '[data-slider-next]';
$(document).on('click', $slider_next_btn, function() {
    slider('next');
});

var $slider_next_btn = $('[data-slider-next]');
$(document).on('click', $slider_next_btn.selector, function() {
    slider('next');
});

它会起作用的

如果要缓存变量以供以后在代码中使用，可以将其更新为：

var $slider_next_btn = '[data-slider-next]';
$(document).on('click', $slider_next_btn, function() {
    slider('next');
});

var $slider_next_btn = $('[data-slider-next]');
$(document).on('click', $slider_next_btn.selector, function() {
    slider('next');
});

---

这将返回传递给jQuery元素的选择器。

我甚至不知道如何尝试以这种方式使用它

---

如果您想将事件绑定到已选择的元素（甚至不需要委派），那么首先应该使用

$slider\u next\u btn.on（“单击”，handlerFunction）

（在本例中没有选择器）。

“我不明白我做错了什么”，不能用jQuery对象替换选择器。如果你看一下，很清楚：“选择器，字符串：一个选择器字符串，用于过滤触发事件的选定元素的后代。”。jQuery对象不是选择器字符串。另外，如果我正确地考虑了您试图用它做什么，那么解决方案就是直接将事件处理程序绑定到所选元素。我甚至不知道如何尝试以这种方式使用它。如果你想将一个事件绑定到你已经拥有的一组元素上（甚至不需要授权），那么为什么不使用

$slider\u next\u btn。首先，在（“单击”，处理程序）

（在本例中没有选择器）上…？@CBroe非常感谢，

$slider\u next\u btn。在（“单击”，处理程序）

上我必须使用。我想把你的评论作为答案，如果你能把它作为答案发布。谢谢你的快速回答。然而，@CBroe为我的案例提出了一个更好的方法：“$slider\u next\u btn.on”（“单击”，handler）”。嘿，别担心！CBroe的答案对于直接绑定事件来说确实是正确的。将来，如果您遇到一个用例，希望缓存变量并在代码中使用它（第二个示例）并访问选择器，您将知道方法：）谢谢您的upvote！