Question

这是一个显示/隐藏文字的小片段。问题是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);

});

Answer 1

您可以尝试这样：

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

Live demo

Answer 2

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

来自documentation，

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.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);

不确定如何从1.7版本使用jQuery“live”

2 个答案: