6

私のHTML

<div>    
    <span  class="more-available" data-completeMessage="This is the complete message you see after clicking more">Hello</span>​
</div>

最後にアンカー タグを動的に追加し、アンカー タグにクリック ハンドラーを追加したいと考えています。だから私はこれをします

$(document).ready(function() {

   //Attach future proof click event to an anchor tag
   $('a.more').on('click', function() {
      var $parent = $(this).parent();
      $parent.text($parent.data('completemessage'));
   });

   //Add the anchor tag
   $('span.more-available').append($('<a class="more">...more</a>'));
});;​

これは動作しません。「オン」を「ライブ」に置き換えると機能します。（ただしライブは減価償却）

私はこれができることを知っています

$(document).ready(function() {

    $('div').on('click','a.more', function() {
        var $parent = $(this).parent();
        $parent.text($parent.data('completemessage'));
    });

    $('span.more-available').append($('<a class="more">...more</a>'));
});;​

それは機能しますが、私の質問は...

「on」がライブのすべての機能を提供すると仮定したのは間違っていましたか? 「on」は将来の要素にバインドされませんか? これは正しい動作ですか、それとも何か間違ったことをしていますか?

フィドル: http://jsfiddle.net/arishlabroo/pRBke/5/

4

3 に答える 3

11

on()ターゲットの委任を可能にする単なるバインダーです。の代わりというよりは、の代わりdelegate()ですlive()。

$('foo').live('click',fn);本質的に$(document).on('click','foo',fn);

それを念頭に置いて、クリック イベントを定数の親ラッパーにバインドし、次のようにターゲットにデリゲートするだけです。

$('span.more-available').on('click', 'a.more', function(){
    var $parent = $(this).parent();
    $parent.text($parent.data('completemessage'));
});
于 2012-04-27T17:35:41.317 に答える
2

以下のように使用します。

$('span.more-available').on('click', 'a.more', function () {
   //..your code
});

代わり.liveに.on、一致するセレクターに対してイベントがトリガーされたときにハンドルが委任されることを意味する特定のセレクターを使用して、ハンドラーを親要素にバインドする必要があります。span.more-available上記では、一致するセレクターa.moreがトリガーされた場合にのみハンドラーを実行するリスナーを追加しています。

要するに、に置き換える2つの手順に従い.liveます.on。

  1. 要素が動的に追加される最も近い親要素を見つけます。
  2. 2 番目の引数として動的要素セレクターを使用して、ハンドラーを親要素にバインドします。
于 2012-04-27T17:35:43.990 に答える
0

メソッドのjQueryドキュメントによると$.live()：

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。

さらなるドキュメントは$.live()、このメソッドの後継者に使用するメソッドと構文を示しています。

後継者に関して .live() メソッドを書き直すのは簡単です。これらは、3 つのイベント添付メソッドすべてに対する同等の呼び出しのテンプレートです。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

jQuery 1.7 以降を使用している場合は、$.on()上記の方法を使用してください。

于 2012-04-27T17:39:55.747 に答える