jqueryのセレクタと.html（）の問題？

Question

セレクタに関連付けられた関数は、.html（）を使用して内容を置換すると機能しなくなります。

<div id="pg_display"> 
<span id="page1">1</span> 
<span id="page2">2</span> 
<span id="page3">3</span> 
</div > 

が彼らのいずれかの方法である：

$(document).ready(function(){ 
$("#pg_display span").click(function(){ 
    var pageno = $(this).attr("id"); 
    alert(pageno); 
    var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>"; 
    $("#pg_display").html(data); 

}); 
}); 

HTML：私は私の元のコードを投稿することができないので、私は...私は何を意味するかを示すために

のjQueryを例を作成しましたありがとう

Answer 1

私はあなたを完全に理解していますが、.click（）関数がなぜ動作しないのか後から追加されたパンは、あなたがこれは現在、ページ上の任意の要素に機能を追加し、後で作成された任意の要素になる

$("#someSelector span").live("click", function(){ 
    # do stuff to spans currently existing 
    # and those that will exist in the future 
}); 

、.live()を使用する必要があります。新しい要素が作成されたときにハンドラを再接続する必要がなくなります。

Answer 2

元のDOM要素が消えてしまったため、HTMLを置き換えた後にイベントを再バインドする必要があります。これを許可するには、匿名関数の代わりにという名前の関数を作成する必要があります。

function pgClick() { 
    var pageno = $(this).attr("id"); 
    alert(pageno); 
    var data="<span id='page1'>1</span><span id='page2'> 2</span><span id='page3'> 3</span>"; 
    $("#pg_display").html(data); 

    $("#pg_display span").click(pgClick); 
} 

$(document).ready(function(){ 
    $("#pg_display span").click(pgClick); 
}); 

Answer 3

使用$（「＃のpg_displayスパン」）生きる代わりの方法を（....、機能を「クリック」） 。クリック。ライブ（JQuery 1.3.2で利用可能）は、既存のFUTUREとマッチしますが、クリック（および.bind）関数は既存のオブジェクトにのみバインドされ、新しいオブジェクトはバインドされません。また、関数からデータを分離する必要がある（多分？）か、各クリックに常に新しいスパンタグを追加します。あなたのクリックハンドラが付属していたDOM要素を新しいものと交換されているため、予想されることだ

http://docs.jquery.com/Events/live#typefn

Answer 4

。

最も簡単な対策はuse 1.3's new "live" eventsです。

Answer 5

あなたの状況では、 'イベント委任'の概念を使用して動作させることができます。

イベント委任では、要素に生成されたイベントは、親がなくならない限り、その親にバブリングし続けるという事実を利用しています。したがって、クリックイベントをバインドする代わりに#pg_display divにクリックイベントが表示されます。 http://jsbin.com/imuye

コード：デモの作業

$(document).ready(
    function() 
    { 
     $("#pg_display").click(
      function(ev) 
      { 
       //As we are binding click event to the DIV, we need to find out the 
       //'target' which was clicked. 
       var target = $(ev.target); 

       //If it's not span, don't do anything. 
       if(!target.is('span')) 
        return;     

       alert('page #' + ev.target.id); 
       var data="<span id='page1'>1</span><span id='page2'>2</span><span id='page3'>3</span>"; 
       $("#pg_display").html(data); 

      } 
     ); 
    } 
); 

http://jsbin.com/imuye/edit

上記のコードではなく、3つのイベントハンドラをバインドの、それは一つだけをバインドするという追加の利点を有します。