動的に作成された要素にjQueryが追加されない

Question

私のページには、AJAXで作成されたラジオボタンのリストが動的に生成されています。ラジオボタンのリストは、以前のフォーム選択に基づいて変更されるため、動的に生成されます。ここでは（これはFirefoxのDOMの視聴者がアドオンではなく、「ページのソースを表示」で表示されます）ラジオボタンの動的に生成されたリストの例である：

<li> 
<input name="giftcard_value" type="radio" id="25" value="25" /> 
<label for="25">$25</label> 
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a> 
</li> 

<li> 
<input name="giftcard_value" type="radio" id="50" value="50" /> 
<label for="50">$50</label> 
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a> 
</li> 

私はまた私が使用しています別のjQueryのスクリプトを持っていますリンク/画像を介して間接的にラジオボタンを「クリック」する。上記のコードでは、実際のラジオボタン（入力タグ内）はユーザーから隠されています。ユーザは、ラジオボタンをクリックすることにより、ラジオボタンをクリックする。これは、「ラジオ選択」クラス（これは実際には画像）を有する選択リンクをクリックすることによって行われる。 jQueryスクリプトは、 '$（ "ラジオ選択"）をクリックしてリンク/イメージをクリックすると検出し、実際のラジオボタンを "クリック/チェック"する機能を実行します。ここではjQueryのスクリプトは次のとおりです。

$(".radio-select").click(
      function(event) { 
       event.preventDefault(); 
       var $boxes = $(this).parent().parent().children(); 
       $boxes.removeClass("selected"); 
       $(this).parent().addClass("selected"); 
       $(this).parent().find("[type=radio]").click().attr("checked","checked"); 
      } 
     ); 

私の問題は、jQueryのスクリプトが動的に生成されたラジオボタンでは動作しないということです。ラジオボタンをHTMLにハードコードすると（ブラウザーの「ビューページソース」で表示可能）、動的に生成された場合は機能しません。 jQueryがリンク/画像上の ".click"を検出できないため、実際のラジオボタンをクリックしないようです。何が問題なのか？どんな助けでも大歓迎です！

Answer 1

$(".radio-select").live("click", function(event){   
        event.preventDefault(); 
        var $boxes = $(this).parent().parent().children(); 
        $boxes.removeClass("selected"); 
        $(this).parent().addClass("selected"); 
        $(this).parent().find("[type=radio]").click().attr("checked","checked"); 
       } 
      ); 

Answer 2

チェックdelegateおよびon方法。 jQueryの1.7、.delegate（のよう

例

$("table").delegate("td", "click", function() { 
    $(this).toggleClass("chosen"); 
}); 

http://api.jquery.com/delegate/

jQueryのページから

、

）.on（）メソッドに置き換えられました。以前のバージョンの が、しかし、それは最も有効な手段のまま 使用にイベント委任

http://api.jquery.com/on/

例

$("p").on("click", function(){ 
alert($(this).text()); 
}); 

Answer 3

問題は、イベント、あなたのクリックメソッドが呼び出されたときということです作成されたハンドラは、その時点で存在するすべての要素にのみ関連付けられます。あなたの解決策は、要素を作成するときにクリックハンドラをアタッチするための呼び出しを追加するか、on（）関数を使用してセレクタにアタッチすることです。

Answer 4

jQuery 1.3.2以上を使用している場合は、jQuery liveを使用する必要があります。だからあなたの結合はなる：

$(".radio-select").live('click',function(event) { 

      event.preventDefault(); 
      var $boxes = $(this).parent().parent().children(); 
      $boxes.removeClass("selected"); 
      $(this).parent().addClass("selected"); 
      $(this).parent().find("[type=radio]").click().attr("checked","checked"); 

     } 
    ); 

あなたは1.3.2の下のjQueryを使用している場合は、livequeryプラグインを使用します。