不知道如何使用jQuery；“生活”；从1.7版开始

这里有一个显示/隐藏文本的小片段。问题是“readless”类不会触发click事件。通常我会使用jQuery的“live”函数，但由于它被弃用为“on”，我想知道我应该如何做

下面是一个JSFIDLE：

代码：

$（文档）.ready（函数（）{
var showHiddenText=函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.prev（）.fadeIn（）；
$this.text（“less”）.removeClass（“readmore锚”）.addClass（“readless锚”）；
};
var hideShownText=函数（e）{
e、 预防默认值（）；
var$this=$（this）；
$this.prev（）.fadeOut（）；
$this.text（“more”）.removeClass（“readless锚”）.addClass（“readmore锚”）；
};
美元（“.readmore”）。在（“”）之后；
$（“.readmore anchor”）。在（“单击”，showHiddenText）；
$（“.readless anchor”）。打开（“单击”，隐藏文本）；
});​

您可以这样尝试：

$(document).on("click",".readmore-anchor", showHiddenText);
$(document).on("click",".readless-anchor", hideShownText);

---

执行dom就绪函数时，此时不存在任何与选择器“.readless anchor”匹配的元素。

.on（）

的工作方式是，它需要一个元素作为父元素。在其子代下发生的所有事件都将冒泡向上传输到父代，并将调用相应的处理程序。这就是为什么jquery的主选择器已经存在的原因

从

事件处理程序仅绑定到当前选定的元素；他们 在代码调用.on（）时页上必须存在

.on（）

函数的第二个参数是用于筛选的选择器

在您的例子中，您可以将

.on（）

锚定在

主体上，并按类进行筛选

$("body").on("click", ".readmore-anchor", null, showHiddenText);
$("body").on("click", ".readless-anchor", null, hideShownText);

这与使用
.live（）

+1表示（1）意识到这一点，以及（2）希望为此做点什么。这里有太多的问题和答案仍然使用
.live（）
。谢谢。我认为这很重要，所以我甚至在我的博客上写了一篇关于它的文章：）
$("body").on("click", ".readmore-anchor", null, showHiddenText);
$("body").on("click", ".readless-anchor", null, hideShownText);

$("body").find(".readmore-anchor").live('click', showHiddenText);