2011-01-05 46 views
3

私はフィールドを動的に追加することができましたが、イベントを処理できない(クリック、変更など)RMAフォームを持っています。動的に追加された要素のjQuery処理イベント

.appendTo("#container");を使用してフィールドを追加し、カウンタを使用してNAMEパラメータを増やしているため、ユーザーが送信すると「Category1:blah」と表示されます。カテゴリ2:blahblah '' Category3:something_else 'など

問題は、(ドロップダウンボックスのような)フィールドを追加してもイベントが発生しないことです。私は3つのドロップダウン[カテゴリ] [サブカテゴリ] [モデル]を持っています。私はカテゴリを選択すると:上記のコードでは

jQuery('#cat').bind("change", function() 
    { 
     jQuery('#subcat').empty(); 
     jQuery('#subcat').attr('disabled', 'disabled'); 
     jQuery('#model').empty(); 
     jQuery('#model').attr('disabled', 'disabled'); 

     LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat 

    }); 

を、私はjQuery('#cat'+counter).bind("change", function() { ...を追加しようとしたが、私は、[カテゴリ]を変更すると同時に、追加ボタンをヒットした場合、そのイベントにのみ発動すると思います。

私は.live使用してみましたが、私はそれが別のクラス/名前のパラメータを持つ添加元素(CAT2、CAT3、CAT4、CAT5 ...)

で動作するように取得するかどうかはわかりません、私は別の必要があるだろう機能も? (LoadSeries2、LoadSeries3など)追加されるフィールドの量は?

感謝の意を表します。

編集:[カテゴリ] [サブカテゴリ] [モデル]ドロップダウンの上にラジオボタンを表示するHTMLコードの一部です。これは、ユーザーがリターンまたはエクスチェンジになるかどうかを選択するためのものです。

newTextBoxDiv.after().html(' 
    <div class="item'+counter+'"><br/> 
    <table width="820" border=1 cellspacing="0" cellpadding="0" align="center" style="border: 1px; border-color: #000;"> 
     <tr> 
     <td> 
      <div align="center" style="font-size: 14px;"> 
      <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Return" selected="selected">Return 
      <input type="radio" class="radioBtn'+counter+'" name="Return_Exchange'+counter+'" value="Exchange">Exchange</div> 
... 
+0

あなたは、いくつかのHTMLを表示するだろうか?私はダイナミックな創造がたくさんあることを知っています。 – hunter

+0

@hunter HTMLは非常に長いですが、ここにはいくつかあります...これはユーザーが返品や交換のどちらになるかを示す[カテゴリ] [サブカテゴリ] [モデル]の上にあります。 – mastofact

答えて

2

あなたはlive()メソッドを使用することができますか、あなたのケースでdelegate()方法が最善かもしれません。 starts-with selector^=)あなたが行くために良いことがあります... on

$("#container").on("change", "[id^='cat']", function() { 
    $("#subcat, #model").empty().attr("disabled", true); 
    LoadSeries($(this).val()); 
}); 
+0

私はdelegate()について知りませんでした!ちょっとしたお買い物に感謝します。 :) – adamjford

+1

'delegate()'と 'live()'は外に出ていないので、 'on()'は追加された要素にイベントをバインドしていないようですので、jQueryの現在のバージョンに似た解決策がありますか?将来は。 http://jsfiddle.net/9C4Kb/ – ygesher

+0

@jegeshは 'on'を使って例を追加しました。'on'は、変更イベントを'#container'要素に適用しているので、将来の要素に作用します – hunter

0

を使用して

$("#container").delegate("[id^='cat']", "change", function() { 
    $("#subcat, #model").empty().attr("disabled", true); 
    LoadSeries($(this).val()); 
}); 

のjQueryと組み合わせることで、私はする必要がありますアイテムのために特別に追加のクラスを使用しますこのイベントにバインドされました。

<input class="cat3 eventClass" /> 

あなたはこれを試してみてくださいライブ とともにセレクタで始まるを使用することができるイベントに

0

を既存または将来$('.eventClass')要素をバインドする電子.live():可能であれば

jQuery('[id^=cat]').live("change", function() 
{ 
    var $this = $(this); 
    var id = this.id.replace(/[^0-9]/, ""); 
    jQuery('#subcat' + id).empty(); 
    jQuery('#subcat' + id).attr('disabled', 'disabled'); 
    jQuery('#model' + id).empty(); 
    jQuery('#model' + id).attr('disabled', 'disabled'); 
    LoadSeries(jQuery(this).val()); // I do a .removeAttr('disabled'); in here for #subcat  
}); 
関連する問題