7

这是一个显示/隐藏文本的小片段。问题是 click 事件不会为“readless”类触发。通常我会使用 jQuery 的“live”功能，但由于它被弃用以支持“on”，我想知道我应该怎么做？

这是一个 jsfiddle：http: //jsfiddle.net/SSAu2/

代码：

$(document).ready(function(){

    var showHiddenText = function(e){

        e.preventDefault();

        var $this = $(this);
        $this.prev().fadeIn();
        $this.text("less").removeClass("readmore-anchor").addClass("readless-anchor");
    };

    var hideShownText = function(e){

        e.preventDefault();

        var $this = $(this);
        $this.prev().fadeOut();
        $this.text("more").removeClass("readless-anchor").addClass("readmore-anchor");
    };

    $(".readmore").after("<a href='#' class='readmore-anchor'>More</a>");
    $(".readmore-anchor").on("click", showHiddenText);
    $(".readless-anchor").on("click", hideShownText);

});​
4

2 回答 2

6

你可以这样尝试：

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

现场演示

于 2012-07-14T13:00:01.587 回答
3

当 dom 就绪函数执行时，当时不存在任何与选择器“.readless-anchor”匹配的元素。工作方式.on()是，它需要一个元素用作父元素。在其后代下发生的所有事件都将冒泡到父级并调用适当的处理程序。这就是为什么 jquery 的主要选择器已经存在很重要的原因。

从文档中，

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。

该.on()函数的第二个参数是要过滤的选择器。

在您的情况下，您可以锚定.on()并按body您的类过滤。

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

这与您可能使用的方法相同.live()

$("body").find(".readmore-anchor").live('click', showHiddenText);
于 2012-07-14T13:10:07.583 回答