7

テキストを表示/非表示にするための小さなスニペットを次に示します。問題は、「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 ready関数を実行すると、その時点でセレクター'.readless-anchor'に一致する要素は存在しません。仕組み.on()は、親として使用するために1つの要素が必要です。その子孫の下で発生するすべてのイベントは、親までバブルし、適切なハンドラーを呼び出します。これが、jqueryのプライマリセレクターがすでに存在することが重要である理由です。

ドキュメントから、

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。

関数の2番目のパラメーター.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 に答える